MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Estils de text

This translation is incomplete. Please help translate this article from English.

Aquesta és la 7th secció del tutorial CSS Getting Started; es donen més exemples d'estils de text. Modifiqueu la fulla d'estil d'exemple per utilitzar diferents fonts.

Informació: Estils de text

CSS té diverses propietats d'estil de text.

Hi ha una propietat abreujada convenient, font, que podeu utilitzar per especificar diversos aspectes alhora, per exemple:

  • Negreta (Bold), Cursiva (Italic) i Majúscula petita (small-caps) (versaleta)
  • Mida (Size)
  • alçada de la línia (Line height)
  • Tipus de lletra (Font typeface)
Exemple
p {
font: italic 75%/125% "Comic Sans MS", cursive;
}

Aquesta regla estableix diverses propietats de la font, fent tots els paràgrafs en cursiva.

La mida de la font s'estableix en les tres quartes parts de la mida d'element pare de cada paràgraf, i l'alçada de la línia s'estableix en 125% (una mica més separats del normal).

El tipus de lletra s'estableix en la Comic Sans MS, però si aquest tipus de lletra no està disponible, el navegador farà ús del seu tipus de lletra cursiva per defecte (escrit a mà).

La regla té l'efecte secundari de desactivar negreta i small-caps (establint el seu valor a normal).

Tipus de fonts

No es pot predir que tipus de lletra tindran els lectors del vostre document . Quan especifiqueu tipus de lletra de font, és una bona idea proporcionar una llista d'alternatives en ordre de preferència.

Acabar la llista amb un dels tipus de lletra per defecte incorporats: serif, sans-serif, cursive, fantasy o monospace.

Si el tipus de lletra no és compatible amb algunes característiques en el document, el navegador pot substituir per un tipus de lletra diferent. Per exemple, el document pot contenir caràcters especials que el tipus de lletra no admet. Si el navegador pot trobar un altre tipus de lletra que té aquests caràcters, llavors farà servir un altre tipus de lletra.

Per especificar un tipus de lletra, utilitzar la propietat font-family.

Les mides de la font

Els usuaris del navegador poden anul·lar les mides de font per defecte o canviar la mida de text mentre llegeixen una pàgina, pel que té sentit el que utilitzeu mides relatives on es pugui.

Podeu utilitzar alguns valors incorporats per mides de font, com small, medium i large. També podeu utilitzar valors relatius a la mida de font de l'element pare com: smaller, larger, 150% o 1.5em. Un "em" és equivalent a l'amplada de la lletra "m" (per la mida de font de l'element pare); per tant 1.5em és una vegada i mitja la mida de la font de l'element pare.

Si cal, podeu especificar una mida real com: 14px (14 píxels) per a un dispositiu de visualització o 14pt (14 punts) per a una impressora. Això no és accessible per als usuaris amb discapacitat visual, ja que no els permet canviar la mida. Una estratègia més accessible és establir un valor incorporat com a mitjà en un element de nivell superior del document i, a continuació establir les mides relatives de tots els seus elements descendents.

Per especificar una mida de font, utilitzar la propietat font-size.

Alçada de la línia

L'alçada de la línia especifica l'espaiat entre línies. Si el document té els paràgrafs llargs amb moltes línies, una separació més gran del normal fa que sigui més fàcil de llegir, especialment si la mida de la font és petita.

Per especificar l'alçada de la línia, utilitzar la propietat line-height.

Decoració

A part de la propietat text-decoration podeu especificar altres estils, com el subratllat(underline) o ratllat(line-through). Podeu configurar-ho a none per eliminar explícitament qualsevol decoració.

Altres propietats

Per especificar cursiva, utilitzar font-style: italic;
Per especificar negreta , utilitzar font-weight: bold;
Per especificar majúscules petites , utilitzar font-variant: small-caps;

Per desactivar qualsevol d'ells individualment, especificar el valor normal o inherit.

Mé detalls

Podeu especificar els estils de text d'altres maneres variades.

Per exemple, algunes de les propietats esmentades aquí tenen altres valors que podeu utilitzar.

En una fulla d'estil complexa, eviteu l'ús de la propietat de font abreujada, causa efectes secundaris (reposició d'altres propietats individuals).

Per a més detalls de les propietats que es relacionen amb les fonts, vegeu Fonts en l'especificació CSS. Per a més detalls de decoració del text, vegeu Text.

Si no voleu dependre dels tipus de lletra instal·lats en els sistemes dels usuaris, podeu utilitzar @font-face per especificar una font en línia. No obstant això, requereix que els usuaris tinguin un navegador compatible amb aquesta regla.

Acció: Especificació de les fonts

Per a un document senzill, es pot establir la font de l'element <body> i la resta del document hereta la configuració.

  1. Editeu l'arxiu CSS.
  2. Afegiu la següent regla per canviar el tipus de lletra en tot el document. La part superior de l'arxiu CSS és un lloc lògic per a ell, però té el mateix efecte allà on ho posis:
    body {
    font: 16px "Comic Sans MS", cursive;
    }
    
  3. Afegiu un comentari explicant la regla, i afegiu espai en blanc per a que coincideixi amb el vostre disseny preferit.
  4. Deseu el fitxer i actualitzeu el navegador per veure l'efecte. Si el sistema té Comic Sans MS, o una altra font cursiva que no suporta cursiva, l'explorador tria un tipus de lletra diferent per al text en cursiva en la primera línia::
    Cascading Style Sheets
    Cascading Style Sheets
  5. Des de la barra de menú del navegador, seleccioneu View > Text Size > Increase (o View > Zoom > Zoom In). Tot i que heu especificat 16 píxels en l'estil, un usuari en llegir el document pot canviar la mida.
Repte

Sense canviar res més, fer que totes les sis lletres inicials sigui dues vegades la mida de la font serif per defecte en el navegador:

Cascading Style Sheets
Cascading Style Sheets
Possible solution

Add the following style declaration to the strong rule:

  font: 200% serif;
If you use separate declarations for font-size and font-family, then the font-style setting on the first paragraph is not overridden.

 

Hide solution
Veure la solució per el repte.

I ara què?

El document d'exemple utilitza diversos colors amb nom. En la següent secció s'enumeren els noms dels colors estàndard i s'explica com es poden especificar altres.

Document Tags and Contributors

 Contributors to this page: Legioinvicta
 Last updated by: Legioinvicta,