Fonta svars - CSS-triki

Anonim

font-weightĪpašums nosaka svaru, vai biezumu, no fontu un tā ir atkarīga vai nu pieejamos fonta sejām fontu saimei vai svaru, ko nosaka pārlūku.

span ( font-weight: bold; )

font-weightĪpašums pieņem vai nu atslēgvārdu vērtību vai iepriekšnoteikta skaitlisku vērtību. Pieejamie atslēgvārdi ir:

  • normal
  • bold
  • bolder
  • lighter

Pieejamās skaitliskās vērtības ir:

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

Atslēgvārda vērtība normalatbilst skaitliskajai vērtībai 400un vērtība boldatbilst 700.

Lai redzētu jebkādu efektu, izmantojot vērtības, kas nav 400vai 700, izmantotajam fontam ir jābūt iebūvētām virsmām, kas atbilst norādītajam svaram.

Ja fontam ir treknrakstā (“700”) vai parastā (“400”) fontu saimes sastāvdaļa, pārlūks to izmantos. Ja tie nav pieejami, pārlūks atdarinās savu trekno vai parasto fonta versiju. Tas neatdarinās pārējos nepieejamos svarus. Lai identificētu jebkuru citu fontu svaru, fontos bieži tiek izmantoti tādi nosaukumi kā “Parasts” un “Viegls”.

Šis demo demonstrē alternatīvo svara vērtību izmantošanu:

Pārbaudiet šo pildspalvu!

Iepriekš minētajā demonstrācijā tiek izmantots bezmaksas fonts Open Sans, kas ir iegults, izmantojot Google Web Fonts API. Fonts tiek ielādēts ar visiem pieejamajiem fontu svariem, tāpēc, izmantojot font-weightrekvizītu, tiek parādīti dažādi pieejamie svari, kā aprakstīts katras rindkopas tekstā. Pieejamie svari vienkārši parāda loģiski tuvāko svaru.

Parastajiem fontiem, piemēram, Arial, Helvetica, Georgia utt., Nav citu svaru kā 400un 700. Tātad vienā un tajā pašā fontā parādītajā demonstrācijā deviņās rindkopās būtu redzami tikai divi svari.

Izmantojot “drosmīgākus” un “vieglākus” atslēgvārdus

Atslēgvārda vērtības bolderun tie lighterir saistīti ar vecākā elementa aprēķināto fonta svaru. Pārlūkprogramma meklēs tuvāko “drosmīgāku” vai “vieglāku” svaru atkarībā no tā, kas ir pieejams fontu saimē, pretējā gadījumā tas vienkārši izvēlēsies “400” vai “700”, atkarībā no tā, kurš no tiem ir visjēdzīgākais.

Bērnu elementi nemantos atslēgvārdu “drosmīgākas” un “vieglākas” vērtības, bet gan mantos aprēķināto svaru.

Pārlūka atbalsts

Chrome Safari Firefox Opera IE Android iOS
Darbi Darbi Darbi Darbi Darbi Darbi Darbi