La font-weightproprietà imposta lo spessore, o spessore, di un carattere e dipende dalle facce dei caratteri disponibili all'interno di una famiglia di caratteri o dai pesi definiti dal browser.
span ( font-weight: bold; )La font-weightproprietà accetta un valore di parola chiave o un valore numerico predefinito. Le parole chiave disponibili sono:
normalboldbolderlighter
I valori numerici disponibili sono:
100200300400500600700800900
Il valore della parola chiave viene normalmappato al valore numerico 400e il valore viene boldmappato a 700.
Per vedere qualsiasi effetto utilizzando valori diversi da 400o 700, il carattere utilizzato deve avere facce incorporate che corrispondono ai pesi specificati.
Se un carattere ha una versione in grassetto ("700") o normale ("400") come parte della famiglia di caratteri, il browser la utilizzerà. Se non sono disponibili, il browser imiterà la propria versione in grassetto o normale del carattere. Non imiterà gli altri pesi non disponibili. I caratteri spesso utilizzano nomi come "Normale" e "Leggero" per identificare qualsiasi spessore di carattere alternativo.
La seguente demo mostra l'uso dei valori di peso alternativi:
La demo qui sopra utilizza il carattere gratuito Open Sans, incorporato utilizzando l'API di Google Web Fonts. Il font viene caricato con tutti i pesi dei font disponibili e quindi, utilizzando la font-weightproprietà, vengono visualizzati i diversi pesi disponibili come descritto dal testo di ogni paragrafo. I pesi non disponibili visualizzano semplicemente il peso logicamente più vicino.
I caratteri comuni come Arial, Helvetica, Georgia, ecc. Non hanno pesi diversi da 400e 700. Quindi la stessa demo visualizzata con uno di quei caratteri mostrerebbe solo due pesi nei nove paragrafi.
Utilizzo di parole chiave "più audaci" e "più chiare"
I valori della parola chiave boldere lightersono relativi al peso del carattere calcolato dell'elemento padre. Il browser cercherà il peso "più audace" o "più leggero" più vicino, a seconda di ciò che è disponibile nella famiglia di caratteri, altrimenti sceglierà semplicemente "400" o "700", a seconda di quale ha più senso.
Gli elementi figlio non erediteranno i valori delle parole chiave "più audace" e "più leggero", ma erediteranno invece il peso calcolato.
Supporto browser
| Cromo | Safari | Firefox | musica lirica | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Lavori | Lavori | Lavori | Lavori | Lavori | Lavori | Lavori |