Carattere - Trucchi CSS | CSS Almanac 2025

La fontproprietà in CSS è una proprietà abbreviata che combina tutte le seguenti proprietà secondarie in una singola dichiarazione.

body ( font: normal small-caps normal 16px/1.4 Georgia; ) /* is the same as: body ( font-family: Georgia; line-height: 1.4; font-weight: normal; font-stretch: normal; font-variant: small-caps; font-size: 16px; ) */

Sono disponibili sette fontproprietà secondarie, tra cui:

font-stretch: questa proprietà imposta la larghezza del carattere, ad esempio condensato o espanso.
- normal
- ultra-condensed
- extra-condensed
- condensed
- semi-condensed
- semi-expanded
- expanded
- extra-expanded
- ultra-expanded
font-style: fa apparire il testo in corsivo o obliquo.
- normal
- italic
- oblique
- inherit
font-variant: cambia il testo di destinazione in maiuscolo.
- normal
- small-caps
- inherit
font-weight: imposta il peso o lo spessore del carattere.
- normal
- bold
- bolder
- lighter
- 100, 200, 300, 400, 500, 600, 700, 800, 900
- inherit
font-size: imposta l'altezza del carattere.
- xx-small
- x-small
- small
- medium
- large
- x-large
- xx-large
- smaller, larger
- percentage
- inherit
line-height: definisce la quantità di spazio sopra e sotto gli elementi in linea.
- normal
- number (font-size multiplier)
- percentage
font-family: definisce il carattere applicato all'elemento.
- sans-serif
- serif
- monospace
- cursive
- fantasy
- caption
- icon
- menu
- message-box
- small-caption
- status-bar
- "string"

Trucchi per la stenografia dei caratteri

La fontproprietà non è così semplice come altre proprietà stenografiche, in parte a causa dei requisiti di sintassi e in parte a causa di problemi di ereditarietà.

Ecco un riepilogo di alcune delle cose che dovresti sapere quando usi questa proprietà di abbreviazione.

Valori obbligatori

Due dei valori fontabbreviati sono obbligatori: font-sizee font-family. Se uno di questi non è incluso, l'intera dichiarazione verrà ignorata.

Inoltre, font-familydeve essere dichiarato per ultimo di tutti i valori, altrimenti, di nuovo, l'intera dichiarazione verrà ignorata.

Valori opzionali

Tutti e cinque gli altri valori sono facoltativi. Se includi uno qualsiasi di font-style, font-variante font-weight, devono precedere font-sizenella dichiarazione. In caso contrario, verranno ignorati e potrebbero anche far sì che i valori obbligatori vengano ignorati.

body ( font: italic small-caps bold 44px Georgia, sans-serif; )

Nell'esempio sopra, sono inclusi tre optional. Finché questi sono definiti in precedenza font-size, possono essere inseriti in qualsiasi ordine.

Anche l'inclusione line-heightè facoltativa ma può essere dichiarata solo dopo font-sizee solo dopo una barra:

body ( font: 44px/20px Georgia, sans-serif; )

Nell'esempio sopra, line-heightè "20px". Se ometti line-height, devi anche omettere la barra, altrimenti l'intera riga verrà ignorata.

Utilizzando font-stretch

La font-stretchproprietà è nuova in CSS3, quindi se viene utilizzata in un browser più vecchio che non supporta font-stretchin fontabbreviazione, verrà ignorata l'intera riga.

La specifica consiglia di includere un fallback senza font-stretch, in questo modo:

body ( font: italic small-caps bold 44px Georgia, sans-serif; /* fallback for older browsers */ font: ultra-condensed italic small-caps bold 44px Georgia, sans-serif; )

Eredità per optional

Se ometti uno qualsiasi dei valori ottici (incluso line-height), gli optional omessi non erediteranno i valori dal loro elemento genitore, come spesso accade con le proprietà tipografiche. Verranno invece ripristinati al loro stato iniziale.

Per esempio:

body ( font: italic small-caps bold 44px/50px Georgia, sans-serif; ) p ( font: 30px Georgia, sans-serif; )

In questo caso, i valori facoltativi (corsivo, maiuscolo e grassetto) vengono inseriti nella fontdichiarazione dell'elemento. Questi si applicheranno anche alla maggior parte degli elementi figlio.

Tuttavia, poiché abbiamo ridichiarato la fontproprietà sugli elementi del paragrafo, tutti gli optional verranno ripristinati sui paragrafi, facendo tornare lo stile, la variante, lo spessore e l'altezza della linea ai valori iniziali.

Parole chiave per la definizione dei caratteri di sistema

Oltre alla sintassi precedente, la fontproprietà consente anche l'uso di parole chiave come valori. Sono:

caption
icon
menu
message-box
small-caption
status-bar

Questi valori di parole chiave impostano il carattere su quello utilizzato nel sistema operativo dell'utente per quella particolare categoria. Ad esempio, la definizione di "didascalia" imposterà il carattere su quell'elemento in modo che utilizzi lo stesso carattere utilizzato nel sistema operativo per i controlli dei sottotitoli (pulsanti, menu a discesa, ecc.).

Una singola parola chiave comprende l'intero valore:

body ( font: menu; )

Le altre proprietà menzionate in precedenza non sono valide insieme a queste parole chiave. Queste parole chiave possono essere utilizzate solo con fontstenografia e non possono essere dichiarate utilizzando nessuna delle singole proprietà a mano lunga.