Secció 3: Propietats

3. Propietats relacionades amb el text

3.8. font (shortcut property)

La propietat font és una abreviació que permet assignar conjuntament les propietats font-style, font-variant, font-weight, font-size, line-height i font-family. La sintaxi per a font és la següent, substituint els noms en cursiva pels valors corresponents:

font: (font-style) (font-variant) (font-weight) font-size(/line-height) font-family

Les propietats entre parèntesi són opcionals, així que només és imprescindible especificar els valors de font-size i font-family. Fixa't que els valors han d'anar separats per espais llevat del cas de line-height, que ha d'anar a continuació de font-size, i separat per una barra /. Fixa't també que no podem establir el valor de font-stretch mitjançant la propietat font.

L'ordre és important: pots triar el de les tres primeres propietats, però font-size(/line-height) i font-family han d'anar al final, i en aquest ordre (recorda que line-height és opcional).

BODY { font-size: 12px; font-family: Verdana; }
H1 { font: oblique normal bold 1.2em/1.5em "Courier New"; }

Els valors individuals de les propietats són: font-style:oblique, font-variant:normal, font-weight:bold, font-size:14px (12 * 1.2), line-height:21px (14 * 1.5) i font-family:"Courier New".

Com vàrem anticipar en parlar de la propietat background, les shortcut properties reinicialitzen les propietats a les quals no haguem assignat un valor explícit. Observa l'exemple següent:

DIV   { font-weight: bold; }
DIV P { font: 12pt Arial; }

Podríem pensar que la font dels paràrafs inclosos a un DIV ha de veure's en negreta. Però no és així, perquè la propietat abreviatura font assigna a font-weight el seu valor inicial (normal). L'style sheet anterior equival a:

DIV   { font-weight: bold; }
DIV P {
font-style: normal;
font-variant: normal;
font-weight: normal;
font-size: 12pt;
line-height: normal;
font-family: Arial; }

A part de servir d'abreviació, la propietat font permet utilitzar les fonts de sistema (system fonts), és a dir, les fonts que està utiltzant el sistema operatiu del client per a diversos elements (barra de títol, icones...).

Els possibles valors de font per a les fonts de sistema són:

• caption - La font dels controls amb etiqueta (nom), com ara els botons.
• icon - La font de les etiquetes de les icones.
• menu - La font dels menús.
• message-box - La font utiltzada als quadres de diàleg.
• small-caption - La font usada per etiquetar controls petits.
• status-bar - La font utilitzada a la barra d'estat.

Fixa't que ara no podem establir les propietats individuals, sinó que s'adopten les de la font de sistema especificada. Recorda que si alguna de les propietats incloses a font no està establerta a la font de sistema serà reinicialitzada.

L'ús de fonts de sistema és interessant quan vulguem que la nostra pàgina adopti l'estil que tingui cada usuari al seu ordinador. És cert que ofereixen relativament poc control, però sempre podem matisar els estils amb posteriors declaracions. Per exemple, podem fer que tota la nostra pàgina agafi la font de sistema 'caption', i després especificar diferents colors i mides per a cada element HTML, conservant però el valor de 'font-family' obtingut de 'caption'.

Ja hem vist totes les propietats directament relacionades amb la font, així com la propietat line-height. Per acabar aquest apartat veurem algunes propietats més que no actuen directament sobre la font, però sí sobre la seva presentació: text-indent, text-decoration, text-shadow, text-transform, letter-spacing i word-spacing.