Famiglie di caratteri e font web-safe
Impostate le famiglie di caratteri e comprendete quali font possono essere utilizzati in sicurezza su tutti i browser.
Famiglie di caratteri e font web-safe è una lezione CSS Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento CSS Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso CSS Academy include 4 lezioni in totale.
Proprietà font-family
La proprietà font-family imposta il carattere tipografico di un elemento. Si specifica una font stack: un elenco separato da virgole di nomi di carattere, dal più preferito al meno preferito, che termina con una famiglia generica.
<p>This text renders in the page's body font stack.</p>
Famiglie di caratteri generiche
CSS definisce cinque famiglie generiche come alternative:
serif— caratteri con grazie decorative (Times, Georgia)sans-serif— caratteri lineari senza grazie (Arial, Helvetica)monospace— caratteri a larghezza fissa (Courier, Consolas)cursive— caratteri in stile manoscrittofantasy— caratteri decorativi da visualizzazione
Caratteri web-safe
I caratteri web-safe sono preinstallati praticamente su tutti i sistemi operativi. Può utilizzarli senza caricare un file di carattere esterno:
- Sans-serif: Arial, Helvetica, Verdana, Trebuchet MS
- Serif: Georgia, Times New Roman
- Monospace: Courier New, Consolas
Nomi di carattere con spazi
I nomi di carattere che contengono spazi devono essere racchiusi tra virgolette:
<p class="serif-example">"Times New Roman", Times, serif</p>
<p class="sans-example">"Open Sans", sans-serif</p>
Buone pratiche per le font stack
Costruisca la font stack includendo:
- Il carattere preferito (potrebbe non essere installato)
- Una o due alternative simili
- Una famiglia generica come ultima risorsa
<p class="font-stack">Georgia → Palatino Linotype → serif fallback</p>
Caratteri dell'interfaccia di sistema
I design moderni utilizzano spesso i caratteri di sistema, ovvero il carattere nativo dell'interfaccia utente del sistema operativo. In questo modo l'aspetto è coerente con il sistema e non è necessario alcun download:
<p class="system-ui-text">This uses your OS's native UI font.</p>
Font stack monospace per il codice
Gli editor di codice e i terminali richiedono una font stack monospace:
<p>Inline <code>const x = 1;</code> code.</p>
<pre>function hello() {
return "world";
}</pre>
Ereditarietà di font-family
La maggior parte degli elementi eredita font-family dal genitore. In alcuni browser, alcuni elementi dei moduli (<input>, <textarea>) non ereditano il valore per impostazione predefinita: lo imposti esplicitamente:
<input type="text" placeholder="Input" />
<textarea placeholder="Textarea"></textarea>
<select><option>Select</option></select>
<button>Button</button>
Verificare i caratteri disponibili
Può verificare se un carattere di sistema è disponibile con la funzione local() all'interno di @font-face. Prima di eseguire il download, i browser cercano innanzitutto una versione locale.
<p class="my-font-text">Text using MyFont (local match or fallback)</p>
Sottoinsiemi con Unicode-Range
Quando carica i caratteri, utilizzi unicode-range in @font-face per caricare solo gli intervalli di caratteri necessari, riducendo le dimensioni del download nei siti multilingue.
<p class="inter-text">Basic Latin text (U+0000–00FF range)</p>
Panoramica dei caratteri variabili
I caratteri variabili contengono un'intera famiglia (pesi, larghezze e stili) in un singolo file, utilizzando assi di variazione del carattere. Riducono notevolmente il numero di richieste HTTP nei design ricchi di elementi tipografici.
Verifica rapida
Quale famiglia di caratteri generica dovrebbe utilizzare come alternativa finale in una font stack sans-serif?
Riepilogo
La proprietà font-family accetta una font stack che termina con una famiglia generica. I caratteri web-safe funzionano ovunque senza dover essere caricati. Le font stack con caratteri dell'interfaccia di sistema offrono un aspetto nativo senza costi HTTP. Racchiuda sempre tra virgolette i nomi di carattere contenenti spazi.
Domande Frequenti
La lezione «Famiglie di caratteri e font web-safe» è gratuita?
Sì — il testo completo di «Famiglie di caratteri e font web-safe» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso CSS Academy, passa a CoddyKit PRO. Il corso CSS Academy include 4 lezioni in totale.
Cosa imparerò in «Famiglie di caratteri e font web-safe»?
Impostate le famiglie di caratteri e comprendete quali font possono essere utilizzati in sicurezza su tutti i browser. Eserciti CSS Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare CSS Academy?
Non è richiesta alcuna esperienza precedente. CSS Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.
Quanto tempo richiede la lezione «Famiglie di caratteri e font web-safe»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione CSS Academy?
Sì. Ogni lezione CSS Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Famiglie di caratteri e font web-safe
- Dimensione, peso e stile del carattere
- Allineamento, decorazione e spaziatura del testo
- Google Fonts e @font-face