Le proprietà dei font possono essere utilizzate per modificare aspetti dei caratteri e per caricare anche font personalizzati. Queste proprietà possono essere applicate a qualsiasi elemento e vengono ereditate dagli elementi figlio.
INDICE
font-family
La proprietà font-family imposta il set di font da richiamare per la gestione dei testi. Il loro valore viene esplicitato attraverso il richiamo al nome del tipo di font (ad esempio Helvetica o Arial), o segnalando la famiglia di appartenenza (san-serif, serif o monospace).
font-family : inherit | <family-names> | <generic-families>
Il valore per questa proprietà è un elenco prioritario di uno o più nomi di font. Se un browser non ha accesso al primo font, utilizza il successivo e così via.
font-family: "Times New Roman", times, serif;
Si consiglia di chiudere l'elenco con un richiamo alla famiglia del font, per essere sicuri che almeno la font family venga caricata dai browser. Se un nome di font è composto da più spazi, come nell'esempio Times New Roman, per essere correttamente richiamato basterà inerirlo tra " ".
font-size
La proprietà font-size imposta la grandezza del font. Il valore può essere un'unità di misura o una percentuale derivata dalla grandezza dell'elemento genitore. Inoltre esistono diversi valori predefiniti per impostare la grandezza dei font.
font-size : inherit | <length> | <percentage> | smaller | larger | xx-small | x-small | small | medium | large | x-large | xx-large
I valori larger e smaller sono relativi alla grandezza dei font dell'elemento genitore, mentre gli altri sono dei valori assoluti. La grandezza iniziale, medium, è impostata di default a 1em (16px) per tutti i testi (salvo specifiche successive).
font-style
La proprietà font-style imposta le caratteristiche del testo secondo questi tre valori: normal, italic e oblique. Inoltre è possibile impostare il valore inherit per far ereditare le caratteristiche del font dell'elemento genitore.
font-style : inherit | normal | italic | oblique
font-variant
La proprietà font-variant viene utilizzata per mostrare il testo utilizzando il maiuscoletto. Il valore small-caps trasforma le lettere del testo in maiuscole che sono però più piccole rispetto al normale testo maiuscolo.
font-variant : inherit | normal | small-caps
font-weight
font-weight imposta lo spessore del font. I valori bolder e lighter impostano lo spessore relativo all'elemento genitore, mentre i valori numerici specificano i pesi assoluti. Il valore bold è uguale a 700 e normal è lo stesso di 400.
font-weight : inherit | normal | bold | bolder | lighter | 100 | 200 | ... | 900
Anche se è possibile specificare più valori per il peso dei font, la maggior parte ha solo uno tipo di grassetto.
font
La proprietà font è in grado di impostare le proprietà dei font in una singola dichiarazione.
font : inherit | <font-style> + <font-variant> + <font-weight> + <font-size> / <line-height> + <font-family>
Le proprietà devono essere specificate nell'ordine elencato secondo un principio di precedenza. Mantenendo l'ordine delle proprietà, si può anche omettere le stesse mantenendo sempre il principio di ordine di scrittura (tranne per font-size e font-family che sono obbligatori).
Se una proprietà non viene dichiarata, viene visualizzato il valore di default che viene ereditato dal valore dell'elemento genitore.
Font personalizzati
I font selezionati possono essere visualizzati solo se il carattere è installato sul dispositivo utilizzato, così da poterli visualizzare all'interno del sito web. Se si necessita di un font non standard, bisogna dichiarare la regola @font-face, che può
caricare il font da una posizione online.
@font-face {
font-family: FontPersonalizzato;
src: url(font.ttf);
}
Nell'esempio questa regola crea un font dal nome FontPersonalizzato che viene fornito dall'indirizzo specificato dall'url. Grazie a questa regola questo font potrà essere utilizzato come qualsiasi altro font.
h1 { font-family: "FontPersonalizzato", arial, sans-serif; }
Nel caso in cui il browser non supportasse il font personalizzato, viene richiamato il font successivo presente nella lista.
