Proprietà CSS font-family
La proprietà CSS font-family definisce i nomi delle famiglie di font per l'elemento selezionato. Guarda alcuni esempi.
La proprietà CSS font-family imposta il carattere tipografico usato per il rendering del testo. Si fornisce un elenco prioritario di font e il browser scorre l'elenco da sinistra a destra, utilizzando il primo che riesce a trovare sul dispositivo dell'utente.
Questa pagina spiega come funziona lo stack di font, la differenza tra famiglie specifiche e generiche, come costruire un elenco di fallback affidabile e i problemi legati alle virgolette e alla corrispondenza carattere per carattere.
Come funziona lo stack di font
I valori si separano con virgole e il browser li tratta come alternative, non come un font combinato. Viene usato il primo font disponibile nell'elenco, poi ci si ferma:
font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;Qui il browser prova prima "Segoe UI". Se non è installato, prova Roboto, poi Helvetica, poi Arial e infine il generico sans-serif, che il browser soddisfa sempre con uno dei suoi font integrati. Per questo motivo uno stack di font dovrebbe terminare sempre con una famiglia generica — ciò garantisce che il testo venga comunque visualizzato in modo sensato, anche su un dispositivo privo dei font preferiti.
I due tipi di nome font
Esistono due tipi di valore che si possono elencare; uno stack efficace li combina entrambi:
family-name— il nome di un carattere tipografico specifico, come"Times New Roman",CourieroArial. Questi vengono elencati per primi perché sono i font effettivamente desiderati.generic-family— una parola chiave di categoria che il browser associa a un font integrato adeguato. Elencarne uno per ultimo come fallback finale. Le famiglie generiche standard sono:
| Famiglia generica | Aspetto tipico | Font di esempio |
|---|---|---|
serif | Lettere con piccoli tratti ("grazie") | Times New Roman, Georgia |
sans-serif | Pulito, senza tratti — comune per UI/testo del corpo | Arial, Helvetica |
monospace | Ogni carattere ha la stessa larghezza — per il codice | Courier New, Consolas |
cursive | Stile scrittura a mano / script | Brush Script, Comic Sans |
fantasy | Stile decorativo/display | Impact, Papyrus |
system-ui | Il font nativo dell'interfaccia del dispositivo | San Francisco, Segoe UI |
Uso delle virgolette nei nomi dei font
Quando un nome di font contiene spazi (o potrebbe essere confuso con una parola chiave), va racchiuso tra virgolette:
/* Multi-word names need quotes */
font-family: "Courier New", "Lucida Console", monospace;
/* Single-word names don't, but quotes are still valid */
font-family: Georgia, serif;Non mettere mai le virgolette attorno alla parola chiave della famiglia generica — "sans-serif" verrebbe interpretato come un font letteralmente chiamato "sans-serif" anziché come la categoria generica.
Fallback carattere per carattere
La selezione del font non si ferma al primo font disponibile per l'intero testo: avviene un carattere alla volta. Se il font abbinato non ha il glifo per un particolare carattere (ad esempio un'emoji o una lettera non latina), il browser continua a scorrere l'elenco cercando un font che abbia quel glifo. Per questo motivo mantenere una famiglia generica ampia alla fine è utile per contenuti con lingue miste o ricchi di simboli.
Per caricare e utilizzare un font personalizzato non installato sul dispositivo dell'utente, definiscilo con la regola @font-face e poi fai riferimento al suo nome in font-family.
| Valore iniziale | serif |
|---|---|
| Si applica a | Tutti gli elementi. Si applica anche a ::first-letter e ::first-line. |
| Ereditato | Sì. |
| Animabile | No. |
| Versione | CSS1 |
| Sintassi DOM | object.style.fontFamily = "Verdana, sans-serif"; |
Sintassi
Sintassi della proprietà CSS font-family
font-family: family-name | generic-family | initial | inherit;Esempio della proprietà font-family:
Esempio della proprietà CSS font-family con il valore sans-serif
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
</style>
</head>
<body>
<h2>Font-family property example</h2>
<p>We used "Lucida Grande" font-family for this text.</p>
</body>
</html>Lo stack sopra richiede "Lucida Sans Unicode", ricade su "Lucida Grande" (l'equivalente macOS) e infine su qualunque font il browser usi per sans-serif — in questo modo il paragrafo rimane leggibile ovunque.
Costruire uno stack di font robusto
Uno stack pratico elenca, nell'ordine: il font ideale, una o due alternative ampiamente installate con un aspetto simile e una famiglia generica per chiudere. Un comune stack di "font di sistema" che usa il carattere nativo dell'interfaccia di ciascuna piattaforma si presenta così:
body {
font-family: -apple-system, system-ui, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif;
}Viene visualizzato come San Francisco sui dispositivi Apple, come Segoe UI su Windows e come Roboto su Android — senza alcun web font da scaricare.
Valori
| Valore | Descrizione | Provalo |
|---|---|---|
| family-name, generic-family | Elenco prioritario di nomi di famiglie di font e/o nomi di famiglie generiche. | Provalo » |
| initial | Imposta la proprietà al suo valore predefinito. | Provalo » |
| inherit | Eredita la proprietà dall'elemento padre. | Provalo » |
Proprietà correlate
font-family viene solitamente impostata insieme alle altre proprietà del font, oppure tutte insieme con la proprietà abbreviata font:
- font-size — quanto è grande il testo.
- font-weight — grassetto del testo.
- font-style — corsivo o normale.
- @font-face — carica un web font personalizzato da referenziare qui.