Le proprietà dei font CSS definiscono il tipo e lo stile dei font usati sugli elementi di un documento web. In questo articolo tratterò delle proprietà dei font CSS 2.1 e dei loro valori. Per una consultazione più approfondita si rimanda comunque alle specifiche ufficiali CSS e alle risorse presenti nella sezione CSS di Html.it.
La proprietà 'font-family'
| Valore: | [[<family-name> | <generic-family>] [,<family-name> | <generic-family>] *] | inherit |
|---|---|
| Iniziale: | dipende dal programma utente |
| Si applica a: | tutti gli elementi |
| Ereditata: | si |
| Percentuali: | N/A |
| Media: | visuale |
| Valore calcolato: | come specificato |
Il valore è un elenco in ordine di priorità di nomi di famiglie di font e/o di nomi di famiglie generiche. A differenza di altre proprietà CSS, i valori sono separati da virgole per indicare che sono alternative:
body {font-family: Helvetica, Arial, sans-serif}
Ci sono due tipi di nomi di famiglie:
- <family-name>
- Il nome di una famiglia di font scelta. Nell'esempio di sopra, Helvetica ed Arial sono famiglie di font.
- <generic-family>
- Nell'esempio di sopra, l'ultimo valore è una famiglia di font generica. Vengono definite le seguenti famiglie
generiche:
- serif (con grazie)
- sans-serif (senza grazie)
- cursive (a imitazione della grafia a mano)
- fantasy (di fantasia)
- monospace (monospaziato)
Gli autori sono incoraggiati a usare una famiglia di font generica come ultima alternativa. I nomi di famiglia generica sono parole chiave e NON devono essere racchiusi tra virgolette.
I nomi di font che contengono uno spazio devono essere racchiusi tra virgolette:
body {font-family: "Book Antiqua", Palatino, Georgia, serif}
Similmente, i nomi di font che contengono parentesi, punti interrogativi ed esclamativi, punti e virgola, virgola e slash devono essere racchiusi tra virgolette e gli deve essere applicato un escape.
La proprietà 'font-style'
| Valore: | normal | italic | oblique | inherit |
|---|---|
| Iniziale: | normal |
| Si applica a: | tutti gli elementi |
| Ereditata: | si |
| Percentuali: | N/A |
| Media: | visuale |
| Valore calcolato: | come specificato |
La proprietà 'font-style' determina se una famiglia di font deve essere visualizzata con caratteri corsivi o obliqui. Il valore 'normal' seleziona un font classificato come 'normal' nel database di font del browser, mentre 'oblique' seleziona un font etichettato come 'oblique'. Un valore 'italic' (corsivo) seleziona un font etichettato come 'italic' o, se il font non è disponibile, uno etichettato come 'oblique'. Esempi:
em {font-style: normal}
h1 {font-style: italic}
La proprietà 'font-variant'
| Valore: | normal | small-caps | inherit |
|---|---|
| Iniziale: | normal |
| Si applica a: | tutti gli elementi |
| Ereditata: | si |
| Percentuali: | N/A |
| Media: | visuale |
| Valore calcolato: | come specificato |
Un altro tipo di variante all'interno di una famiglia di font è il maiuscoletto (small-caps). In un font in maiuscoletto le lettere minuscole sono simili a quelle maiuscole, ma con una dimensione minore e con proporzioni leggermente differenti. Il valore 'small-caps' crea questa variante:
acronym {font-variant: small-caps}
La proprietà 'font-weight'
| Valore: | normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit |
|---|---|
| Iniziale: | normal |
| Si applica a: | tutti gli elementi |
| Ereditata: | si |
| Percentuali: | N/A |
| Media: | visuale |
| Valore calcolato: | vedi sotto |
La proprietà 'font-weight' seleziona il peso di un font. I valori da '100' a '900' formano una sequenza ordinata, in cui ogni numero indica un peso che è scuro almeno come il suo predecessore. La parola chiave 'normal' corrisponde a '400' e 'bold' (grassetto) corrisponde a '700'. Nella quasi totalità dei casi, tuttavia, i browser non riescono a coprire i valori oltre '700', in quanto i font che dispongono di caratteri con un peso superiore a Bold non sono molto diffusi (per esempio Heavy, Black o Extrablack):
strong {font-weight: 400} /* normal */
h4 {font-weight: bold}
h5 {font-weight: 600}
I valori 'bolder' e 'lighter' selezionano un peso del font relativo al peso ereditato dal genitore. Gli elementi figli ereditano il peso risultante, non il valore della parola chiave:
em {font-weight: bolder}
La proprietà 'font-size'
| Valore: | <absolute-size> | <relative-size> | <length> | <percentage> |
|---|---|
| Iniziale: | medium |
| Si applica a: | tutti gli elementi |
| Ereditata: | si |
| Percentuali: | in riferimento alla dimensione del font dell'elemento genitore |
| Media: | visuale |
| Valore calcolato: | lunghezza assoluta |
La dimensione del font corrisponde al quadrato em, un concetto usato in tipografia. I valori hanno i seguenti significati:
- <absolute-size>
- Una parola chiave <absolute-size> corrisponde ad un indice nella tabella delle dimensioni dei font usata dal browser.
I valori sono:
[xx-small | x-small | small | medium | large | x-large | xx-large]
La seguente tabella mostra una corrispondenza tra le parole chiave, le intestazioni HTML e i valori dell'attributo
sizedel tagfont. Il valore 'medium' viene usato come valore intermedio di riferimento.Parola chiave Intestazione HTML Valore di 'size' xx-small h6 1 x-small - - small h5 2 medium h4 3 large h3 4 x-large h2 5 xx-large h1 6 - - 7 Data la difficoltà incontrata nelle implementazioni, si raccomanda prudenza nell'uso delle parole chiave.
- <relative-size>
- Una parola chiave <relative-size> è relativa alla tabella delle dimensioni dei font del browser e alla dimensione
del font dell'elemento genitore. I valori sono:
[larger | smaller]
Per esempio, se l'elemento genitore ha una dimensione pari a 'medium', il valore 'larger' renderà la dimensione del font dell'elemento corrente come 'large', e 'smaller' come 'small'.
I valori di lunghezza e di percentuale non prendono in considerazione la tabella delle dimensioni dei font. I valori negativi non sono ammessi. In genere i browser onorano questa uguaglianza:
medium = 100% = 1em
Ciò si rivela particolarmente utile nel caso dei documenti (X)HTML:
body {font-size: 100%} /* medium */
h1 {font-size: 2em}
div {font-size: 80%}
Purtroppo con le misure in percentuale non tutti i browser utilizzano un fattore di scalamento interoperabile. La soluzione consiste nell'impostare un valore iniziale leggermente superiore al normale:
body {font-size: 100.01%}
div {font-size: 80%}
La proprietà 'font'
| Valore: | [[<'font-style'> || <'font-variant'> || <'font-weight'>]?<'font-size'>[/<'line-height'>]? <'font-family'>] | caption | icon | menu | message-box | small-caption | status-bar | inherit |
|---|---|
| Iniziale: | vedi proprietà individuali |
| Si applica a: | tutti gli elementi |
| Ereditata: | si |
| Percentuali: | vedi proprietà individuali |
| Media: | visuale |
| Valore calcolato: | vedi proprietà individuali |
La proprietà 'font' è una proprietà abbreviata che imposta le proprietà dei font e la 'line-height' in un'unica dichiarazione:
h1 {font: italic small-caps bold 2em/1 Georgia, serif}
I valori non dichiarati esplicitamente assumono il loro valore iniziale. Quando non viene usata per dichiarare un font di sistema, questa proprietà deve contenere almeno i valori per 'font-size' e 'font-family'. Esempi:
p {font: 80% Arial, sans-serif} /* valido */
div {font: Verdana, sans-serif} /* non valido */
I seguenti valori si riferiscono ai font di sistema:
- caption
- Il font usato nelle didascalie delle caselle.
- icon
- Il font usato per etichettare le icone.
- menu
- Il font usato nei menu.
- message-box
- Il font usato nelle caselle di dialogo.
- small-caption
- Il font usato per etichettare piccoli riquadri di controllo.
- status-bar
- Il font usato nelle barre di stato delle finestre.
I font di sistema possono essere impostati solo come un'unica dichiarazione, che comprende la famiglia, il peso, lo stile ecc. Esempio:
p {font: caption}
Questi valori possono essere alterati con le singole proprietà dei font, ma non tutti i browser lo permettono, in quanto i font di sistema vengono spesso considerati come valori fissi e non modificabili.