Font CSS
La scelta del font giusto per il tuo sito web è importante!
La selezione del carattere è importante
La scelta del font giusto ha un enorme impatto sul modo in cui i lettori sperimentano un sito web.
Il font giusto può creare un'identità forte per il tuo marchio.
È importante utilizzare un font di facile lettura. Il carattere aggiunge valore al tuo testo. È anche importante scegliere il colore e la dimensione del testo corretti per il carattere.
Famiglie di caratteri generici
In CSS ci sono cinque famiglie di font generiche:
- I caratteri Serif hanno un piccolo tratto ai bordi di ogni lettera. Creano un senso di formalità ed eleganza.
- I caratteri sans-serif hanno linee pulite (senza piccoli tratti allegati). Creano un look moderno e minimalista.
- Caratteri monospazio : qui tutte le lettere hanno la stessa larghezza fissa. Creano un aspetto meccanico.
- I caratteri corsivi imitano la scrittura umana.
- I caratteri fantasy sono caratteri decorativi/giocosi.
Tutti i diversi nomi di font appartengono a una delle famiglie di font generiche.
Differenza tra caratteri Serif e Sans-serif
Nota: sugli schermi dei computer, i caratteri sans-serif sono considerati più facili da leggere rispetto ai caratteri serif.
Alcuni esempi di caratteri
| Generic Font Family | Examples of Font Names |
|---|---|
| Serif | Times New Roman Georgia Garamond |
| Sans-serif | Arial Verdana Helvetica |
| Monospace | Courier New Lucida Console Monaco |
| Cursive | Brush Script MT Lucida Handwriting |
| Fantasy | Copperplate Papyrus |
La proprietà CSS della famiglia di caratteri
In CSS, utilizziamo la font-familyproprietà per specificare il carattere di un testo.
Nota : se il nome del carattere è composto da più parole, deve essere racchiuso tra virgolette, ad esempio: "Times New Roman".
Suggerimento: la font-familyproprietà deve contenere diversi nomi di font come sistema di "fallback", per garantire la massima compatibilità tra browser/sistemi operativi. Inizia con il carattere che desideri e termina con una famiglia generica (per consentire al browser di selezionare un carattere simile nella famiglia generica, se non sono disponibili altri caratteri). I nomi dei caratteri devono essere separati da una virgola. Maggiori informazioni sui font di fallback nel prossimo capitolo .
Esempio
Specifica alcuni caratteri diversi per tre paragrafi:
.p1 {
font-family: "Times New Roman", Times, serif;
}
.p2 {
font-family: Arial, Helvetica, sans-serif;
}
.p3 {
font-family: "Lucida Console", "Courier New", monospace;
}