font-weight
Vlastnosť nastavuje hmotnosť, hrúbka, z písma a je závislé buď na dostupných plochách písmo v rámci rodiny fontov alebo hmotnosti definovanej v prehliadači.
span ( font-weight: bold; )
font-weight
Hoteli je možné platiť buď hodnotu kľúčového slova alebo vopred definované číselnú hodnotu. Dostupné kľúčové slová sú:
normal
bold
bolder
lighter
Dostupné číselné hodnoty sú:
100
200
300
400
500
600
700
800
900
Hodnota kľúčového slova sa normal
mapuje na číselnú hodnotu 400
a hodnota sa bold
mapuje na 700
.
Aby bolo možné vidieť efekt s použitím iných hodnôt ako 400
alebo 700
, musí mať použité písmo vstavané tváre, ktoré sa zhodujú s uvedenými váhami.
Ak má písmo ako súčasť rodiny fontov tučné („700“) alebo normálne („400“) verzie, použije to prehliadač. Ak tieto nie sú k dispozícii, prehliadač napodobní svoju vlastnú tučnú alebo normálnu verziu písma. Nebude napodobňovať ostatné nedostupné váhy. Fonty často používajú názvy ako „Regular“ a „Light“ na identifikáciu alternatívnych váh písma.
Nasledujúca ukážka demonštruje použitie alternatívnych hodnôt hmotnosti:
Vyskúšajte toto pero!
Vyššie uvedená ukážka využíva bezplatné písmo Open Sans vložené pomocou rozhrania Google Web Fonts API. Písmo je načítané so všetkými dostupnými váhami písma, a tak sa pomocou tejto font-weight
vlastnosti zobrazia rôzne dostupné váhy, ako je opísané v texte každého odseku. Nedostupné závažia jednoducho zobrazujú logicky najbližšiu hmotnosť.
Bežné písma ako Arial, Helvetica, Georgia atď. Nemajú inú váhu ako 400
a 700
. Rovnaká ukážka zobrazená s jedným z týchto typov písma by teda v deviatich odsekoch zobrazila iba dve váhy.
Používanie výrazov „odvážnejší“ a „ľahší“
Hodnoty kľúčového slova bolder
a lighter
sú relatívne k vypočítanej hmotnosti písma nadradeného prvku. Prehliadač bude hľadať najbližšiu „odvážnejšiu“ alebo „ľahšiu“ váhu podľa toho, čo je k dispozícii v rodine písiem, inak jednoducho zvolí „400“ alebo „700“, podľa toho, čo má najväčší zmysel.
Podradené prvky nezdedia „odvážnejšie“ a „ľahšie“ hodnoty kľúčových slov, ale dedia vypočítanú váhu.
Podpora prehľadávača
Chrome | Safari | Firefox | Opera | IE | Android | iOS |
---|---|---|---|---|---|---|
Tvorba | Tvorba | Tvorba | Tvorba | Tvorba | Tvorba | Tvorba |