Váha písma - Triky CSS | Almanach CSS 2025

font-weightVlastnosť 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-weightHoteli 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 normalmapuje na číselnú hodnotu 400a hodnota sa boldmapuje na 700.

Aby bolo možné vidieť efekt s použitím iných hodnôt ako 400alebo 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-weightvlastnosti 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 400a 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 boldera lightersú 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.