Teža pisave - CSS-triki

Anonim

font-weightLastnost določa težo ali debelino, iz pisave in je odvisna bodisi od razpoložljivih pisav znotraj družine pisave ali uteži, ki ga določi brskalnik.

span ( font-weight: bold; )

font-weightNepremičnine sprejema bodisi ključno besedo vrednost ali vnaprej določenega številčno vrednost. Razpoložljive ključne besede so:

  • normal
  • bold
  • bolder
  • lighter

Razpoložljive številske vrednosti so:

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

Vrednost ključne besede se normalpreslika v številčno vrednost, 400vrednost pa boldv 700.

Če želite videti kakršen koli učinek z uporabo vrednosti, ki niso 400ali 700, mora imeti uporabljena pisava vgrajene obraze, ki se ujemajo z navedenimi utežmi.

Če ima pisava krepko (»700«) ali običajno (»400«) različico kot del družine pisav, jo brskalnik uporabi. Če ti niso na voljo, brskalnik posnema svojo krepko ali običajno različico pisave. Ne bo posnemala drugih nedostopnih uteži. Pisave pogosto uporabljajo imena, kot sta »Regular« in »Light«, da prepoznajo katero koli drugo utež pisave.

Naslednja predstavitev prikazuje uporabo nadomestnih vrednosti teže:

Oglejte si to pisalo!

Zgornja predstavitev uporablja brezplačno pisavo Open Sans, vdelano z API-jem Google Web Fonts. Pisava je naložena z vsemi razpoložljivimi utežmi pisave, zato so z uporabo font-weightlastnosti prikazane različne razpoložljive uteži, kot je opisano v besedilu vsakega odstavka. Nedostopne uteži preprosto prikažejo logično najbližjo težo.

Običajne pisave, kot so Arial, Helvetica, Georgia itd., Nimajo uteži razen 400in 700. Torej bi isti prikaz, prikazan z eno od teh pisav, v devetih odstavkih prikazal le dve uteži.

Uporaba "drznejših" in "lažjih" ključnih besed

Vrednosti ključnih besed bolderin lighterso glede na izračunano težo pisave nadrejenega elementa. Brskalnik bo poiskal najbližjo "drznejšo" ali "lažjo" težo, odvisno od tega, kaj je na voljo v družini pisav, sicer bo preprosto izbral "400" ali "700", odvisno od tega, katera je najbolj smiselna.

Podrejeni elementi ne bodo podedovali vrednosti drznejših in lažjih ključnih besed, temveč bodo podedovali izračunano težo.

Podpora za brskalnik

Chrome Safari Firefox Opera IE Android iOS
Deluje Deluje Deluje Deluje Deluje Deluje Deluje