Den font-weightegenskab indstiller vægt eller tykkelse, af en font og afhænger enten på tilgængelige font flader inden for en skrifttype eller vægte defineret af browseren.
span ( font-weight: bold; )Den font-weightejendom accepterer enten et søgeord værdi eller foruddefineret numerisk værdi. De tilgængelige nøgleord er:
normalboldbolderlighter
De tilgængelige numeriske værdier er:
100200300400500600700800900
Nøgleordsværdien normaltilordnes den numeriske værdi 400og værdien boldtilordnes 700.
For at se nogen effekt ved hjælp af andre værdier end 400eller 700skal den anvendte skrifttype have indbyggede ansigter, der matcher de angivne vægte.
Hvis en skrifttype har en fed ("700") eller normal ("400") version som en del af skrifttypefamilien, bruger browseren det. Hvis disse ikke er tilgængelige, efterligner browseren sin egen fed eller normale version af skrifttypen. Det vil ikke efterligne de andre ikke-tilgængelige vægte. Skrifttyper bruger ofte navne som "Regular" og "Light" til at identificere eventuelle alternative fontvægte.
Følgende demo viser brugen af de alternative vægtværdier:
Ovenstående demo bruger den gratis skrifttype Open Sans, integreret ved hjælp af Google Web Fonts API. Skrifttypen er indlæst med alle de tilgængelige fontvægte, og ved hjælp af font-weightegenskaben vises de forskellige tilgængelige vægte som beskrevet i hvert afsnits tekst. De utilgængelige vægte viser simpelthen den logisk nærmeste vægt.
Almindelige skrifttyper som Arial, Helvetica, Georgia osv. Har ikke andre vægte end 400og 700. Så den samme demo, der vises med en af disse skrifttyper, viser kun to vægte i de ni afsnit.
Brug af "dristigere" og "lettere" nøgleord
Nøgleordets værdier bolderog lighterer i forhold til den beregnede fontvægt for det overordnede element. Browseren vil se efter den nærmeste “dristigste” eller “lettere” vægt, afhængigt af hvad der er tilgængelig i skrifttypefamilien, ellers vælger den simpelthen “400” eller “700”, afhængigt af hvilket der giver mest mening.
Underordnede elementer arver ikke de "dristigere" og "lettere" nøgleordsværdier, men i stedet arver den beregnede vægt.
Browsersupport
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Arbejder | Arbejder | Arbejder | Arbejder | Arbejder | Arbejder | Arbejder |