Den font-weight
egenskapen anger vikten, eller tjocklek, hos ett teckensnitt och är beroende antingen på tillgängliga teckenytor inom en typsnittsfamilj eller vikter definieras av webbläsaren.
span ( font-weight: bold; )
Den font-weight
fastighet accepterar antingen ett sökord värde eller fördefinierad numeriskt värde. De tillgängliga nyckelorden är:
normal
bold
bolder
lighter
De tillgängliga numeriska värdena är:
100
200
300
400
500
600
700
800
900
Nyckelordsvärdet normal
mappar till det numeriska värdet 400
och värdet bold
kartläggs till 700
.
För att se någon effekt med andra värden än 400
eller 700
måste teckensnittet ha inbyggda ansikten som matchar de angivna vikterna.
Om ett teckensnitt har en fet ("700") eller normal ("400") version som en del av teckensnittsfamiljen, kommer webbläsaren att använda det. Om de inte är tillgängliga efterliknar webbläsaren sin egen djärva eller normala version av teckensnittet. Det kommer inte att efterlikna de andra otillgängliga vikterna. Teckensnitt använder ofta namn som "Regular" och "Light" för att identifiera eventuella alternativa teckensnittsvikter.
Följande demo visar användningen av de alternativa viktvärdena:
Kolla in den här pennan!
Ovanstående demo använder det fria teckensnittet Open Sans, inbäddat med Google Web Fonts API. Teckensnittet laddas med alla tillgängliga teckensnittsvikter och så, med hjälp av font-weight
egenskapen, visas de olika tillgängliga vikterna som beskrivs i varje stycks text. De otillgängliga vikterna visar helt enkelt den logiskt närmaste vikten.
Vanliga teckensnitt som Arial, Helvetica, Georgia, etc. har inte andra vikter än 400
och 700
. Så samma demo som visas med ett av dessa teckensnitt skulle bara visa två vikter i de nio styckena.
Använda "djärvare" och "lättare" nyckelord
Nyckelordets värden bolder
och lighter
är relativt den beräknade teckensnittets vikt för det överordnade elementet. Webbläsaren kommer att leta efter närmaste "djärvare" eller "lättare" vikt, beroende på vad som finns i teckensnittsfamiljen, annars väljer det helt enkelt "400" eller "700", beroende på vilket som är mest vettigt.
Underordnade element kommer inte att ärva de "djärvare" och "lättare" nyckelordsvärdena, utan istället ärva den beräknade vikten.
Webbläsarstöd
Krom | Safari | Firefox | Opera | IE | Android | iOS |
---|---|---|---|---|---|---|
Arbetar | Arbetar | Arbetar | Arbetar | Arbetar | Arbetar | Arbetar |