Skriftvekt - CSS-triks

Anonim

Den font-weightegenskap setter vekt eller tykkelse, av en skrifttype og er avhengig enten av tilgjengelige skrifttyper innenfor en familie skrift eller vekter definert av nettleseren.

span ( font-weight: bold; )

Den font-weighteiendommen aksepterer enten et søkeord verdi eller forhåndsdefinert numerisk verdi. De tilgjengelige nøkkelordene er:

  • normal
  • bold
  • bolder
  • lighter

De tilgjengelige numeriske verdiene er:

  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900

Nøkkelordverdien normaltilordnes den numeriske verdien 400og verdien boldtilordnes 700.

For å se noen effekt ved bruk av andre verdier enn 400eller 700, må skriften som brukes, ha innebygde ansikter som samsvarer med de spesifiserte vektene.

Hvis en skrift har en fet (“700”) eller normal (“400”) versjon som en del av fontfamilien, vil nettleseren bruke den. Hvis de ikke er tilgjengelige, vil nettleseren etterligne sin egen fete eller normale versjon av skriften. Det vil ikke etterligne de andre utilgjengelige vektene. Skriftene bruker ofte navn som “Vanlig” og “Lys” for å identifisere alternative skriftvekter.

Følgende demo viser bruken av de alternative vektverdiene:

Sjekk ut denne pennen!

Ovennevnte demo bruker gratis font Open Sans, innebygd ved hjelp av Google Web Fonts API. Skriften er lastet med alle tilgjengelige skriftvekter, og ved bruk av font-weightegenskapen vises de forskjellige tilgjengelige vektene som beskrevet i hvert avsnitts tekst. De utilgjengelige vektene viser bare den logisk nærmeste vekten.

Vanlige skrifttyper som Arial, Helvetica, Georgia, etc. har ikke andre vekter enn 400og 700. Så den samme demoen som vises med en av disse skriftene, viser bare to vekter i de ni avsnittene.

Ved hjelp av "dristigere" og "lettere" søkeord

Nøkkelordverdiene bolderog lighterer i forhold til den beregnede skriftvekten til det overordnede elementet. Nettleseren vil se etter den nærmeste "dristigere" eller "lettere" vekten, avhengig av hva som er tilgjengelig i fontfamilien, ellers vil den bare velge "400" eller "700", avhengig av hva som gir mest mening.

Underordnede elementer vil ikke arve de "dristigere" og "lettere" søkeordverdiene, men i stedet arve den beregnede vekten.

Nettleserstøtte

Chrome Safari Firefox Opera DVS Android iOS
Virker Virker Virker Virker Virker Virker Virker