Font-vikt - CSS-tricks

Anonim

Den font-weightegenskapen 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-weightfastighet 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 normalmappar till det numeriska värdet 400och värdet boldkartläggs till 700.

För att se någon effekt med andra värden än 400eller 700må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-weightegenskapen, 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 400och 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 bolderoch 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