font-weight
Vlastnost nastavuje hmotnost, tloušťka, z písma a je závislé buď na dostupných plochách písmo v rámci rodiny fontů nebo hmotnosti definované v prohlížeči.
span ( font-weight: bold; )
font-weight
Hotelu je možné platit buď hodnotu klíčového slova nebo předem definované číselnou hodnotu. K dispozici jsou klíčová slova:
normal
bold
bolder
lighter
Dostupné číselné hodnoty jsou:
100
200
300
400
500
600
700
800
900
Hodnota klíčového slova se normal
mapuje na číselnou hodnotu 400
a hodnota se bold
mapuje na 700
.
Aby bylo možné vidět jakýkoli efekt s použitím jiných hodnot než 400
nebo 700
, musí mít použité písmo předdefinované tváře, které odpovídají uvedeným váhám.
Pokud má písmo v rámci rodiny písem tučnou („700“) nebo normální („400“) verzi, použije ji prohlížeč. Pokud tyto nejsou k dispozici, prohlížeč napodobí vlastní tučné nebo normální verzi písma. Nebude napodobovat ostatní nedostupné váhy. Fonty často používají názvy jako „Regular“ a „Light“ k identifikaci jakékoli alternativní váhy písma.
Následující ukázka ukazuje použití alternativních hodnot hmotnosti:
Podívejte se na toto pero!
Výše uvedená ukázka využívá bezplatné písmo Open Sans vložené pomocí rozhraní Google Web Fonts API. Písmo se načte se všemi dostupnými váhami písma, a tak se pomocí font-weight
vlastnosti zobrazí různé dostupné váhy, jak je popsáno v textu každého odstavce. Nedostupná závaží jednoduše zobrazují logicky nejbližší váhu.
Běžná písma jako Arial, Helvetica, Georgia atd. Nemají jiné váhy než 400
a 700
. Stejná ukázka zobrazená s jedním z těchto písem by tedy v devíti odstavcích zobrazila pouze dvě váhy.
Použití výrazů „odvážnější“ a „lehčí“
Hodnoty klíčového slova bolder
a lighter
jsou relativní k vypočítané hmotnosti písma nadřazeného prvku. Prohlížeč bude hledat nejbližší „odvážnější“ nebo „lehčí“ váhu podle toho, co je v rodině písem k dispozici, jinak jednoduše zvolí „400“ nebo „700“, podle toho, co má největší smysl.
Podřízené prvky nezdědí hodnoty klíčového slova „odvážnější“ a „lehčí“, ale zdědí vypočítanou váhu.
Podpora prohlížeče
Chrome | Safari | Firefox | Opera | TJ | Android | iOS |
---|---|---|---|---|---|---|
Funguje | Funguje | Funguje | Funguje | Funguje | Funguje | Funguje |