13. Text: els atributs font

 

Índex

Els atributs font

En CSS hi ha una sèrie de propietats tipogràfiques agrupades en la denominació comuna font. Les principals propietats regulades d'aquesta manera són descrites en els apartats següents.

 

Tipus de lletra

Tipogràficament es distingeixen diferents tipus de lletra. Podem especificar que el navegador, en trobar un text, n'hi apliqui un de determinat, mitjançant l'atribut font-family:

Si el nom del tipus de lletra és compost, cal tancar-lo entre cometes.

Pot succeir que l'ordinador de qui consulta el document no tingui el tipus de lletra especificat; en aquest cas, s'hi aplica el tipus que tingui assignat per defecte el navegador.

Podem assignar més d'un tipus de lletra, segons un ordre de preferències, de manera que si no hi ha la primera, s'hi aplica la segona, i si no, la tercera... Els diversos tipus s'especifiquen separats per comes. Hi ha cinc grups de tipus, anomenats sans-serif, serif, cursive, fantasy i monospace. Sol posar-se en darrer lloc un d'aquests cinc tipus. Per exemple, amb l'especificació

aconseguim que el navegador ens presenti els paràgrafs amb la lletra Times New Roman si hi és a l'ordinador, o si no, una de serif.

Exemple

 

Unitats de mesura

L'especificació de les mides exigeix l'ús d'unitats de mesura. Es fan servir dos tipus d'unitats de mesura, les directes i les indirectes.

De les directes, la unitat bàsica és el píxel (px). Se'n fan servir també d'altres: el centímetre (cm) i el punt (pt), unitat tradicional en tipografia equivalent a 0,3759mm.

Les mides en píxels no asseguren cap mida absoluta determinada. Aquesta depèn de la resolució de la pantalla i de les mides d'aquesta: 15 píxels a una resolució de 800 x 600 dóna representacions més grans que si la resolució és de 1024 x 768, i qualsevol mida resulta més gran amb un monitor de 24" que amb un de 20".

Les especificacions en cm i pt encara són més conflictives, ja que donen una falsa aparença de mida absoluta.

 

Mides de la lletra

La mida de la lletra es fixa amb l'atribut font-size:

on valor s'expressa amb un nombre i una unitat:

En absència d'especificació d'unitats, s'entén que hi corresponen píxels.

La mida també pot ésser especificada amb els termes xx-large, x-large, large, medium, small, x-small i xx-small.

Exemple

La mida de la lletra també es pot especificar d'una manera relativa, per comparació amb la d'un element d'àmbit més ampli. En aquest cas s'expressa en forma de percentatge: una especificació d'una mida de lletra del 80% en un paràgraf de citació vol dir que la lletra tindrà una mida del 80% de l'especificació que s'hagi fet amb caràcter general a BODY.

Exemple

 

Negreta

Amb els fulls d'estil es pot especificar el gruix de la lletra:

El gruix s'indica amb una escala que va del 100 al 900; a més poden fer-se servir els termes normal, que equival a 400, i bold (negreta), que equival a 700 (per defecte, normal).

Si un determinat estil només s'aplica a un fragment curt, sol aplicar-se a un element SPAN.

En l'HTML hi ha etiquetes dedicades a donar rellevància a determinats fragments de text. Tot i que això es troba sovint més a prop de l'estil que no de l'estructura, aquestes etiquetes no han estat desaconsellades. N'hi ha dues sèries: la dels anomenats estils físics, que especifiquen una forma determinada de relleu, i la dels estils lògics, que en principi tindrien una interpretació menys definida, si bé a la pràctica els grans navegadors han coincidit a interpretar-los d'una mateixa forma.

La negreta s'obté mitjançant un dels dos grups d'etiquetes:

La primera és un estil físic; la segona, un estil lògic.

Exemple

 

Cursiva

D'una manera anàloga, per a la cursiva es fa servir en els fulls d'estil

El valor d'estil pot ésser normal, italic o oblique (per defecte, normal).

En HTML també hi ha una etiqueta d'estil físic i una d'estil lògic per a la cursiva:

Les especificacions de negreta i de cursiva són acumulables.

Exemple

 

Versaletes

Amb els fulls d'estil es pot especificar, a més, un text en versaletes:

El valor de variant pot ésser normal o small-caps (= versaletes) (per defecte, normal).

Exemple

 

Acumulació d'atributs

Les especificacions font-style, font-variant, font-weight, font-size i font-family es poden acumular dins l'atribut genèric font.

Exemple