Font-weight - CSS-trikovi | CSS Almanah 2025

font-weightSvojstvo postavlja težine ili debljine, od slova i ovisi ni o dostupnim fontovima unutar font obitelji ili težine koju određuje pregledniku.

span ( font-weight: bold; )

font-weightNekretnine prihvaća ili vrijednost ključne riječi ili unaprijed brojčanu vrijednost. Dostupne ključne riječi su:

normal
bold
bolder
lighter

Dostupne numeričke vrijednosti su:

100
200
300
400
500
600
700
800
900

Vrijednost ključne riječi normalpreslikava se na numeričku vrijednost, 400a vrijednost boldpreslikava na 700.

Da bi se vidio bilo kakav efekt koji koristi vrijednosti osim 400ili 700, font koji se koristi mora imati ugrađena lica koja odgovaraju navedenim težinama.

Ako font ima podebljanu ("700") ili normalnu ("400") verziju kao dio porodice fontova, preglednik će to koristiti. Ako nisu dostupni, preglednik će oponašati vlastitu podebljanu ili normalnu verziju fonta. Neće oponašati ostale nedostupne utege. Fontovi često koriste nazive poput "Regular" i "Light" da bi identificirali bilo koju alternativnu težinu fonta.

Sljedeći prikaz prikazuje upotrebu zamjenskih vrijednosti težine:

Pogledajte ovu olovku!

Gornja demonstracija koristi besplatni font Open Sans, ugrađen pomoću API-ja Google Web Fonts. Font se učitava sa svim dostupnim težinama fontova, pa se tako pomoću font-weightsvojstva prikazuju različite dostupne težine kako je opisano u tekstu svakog odlomka. Nedostupni utezi jednostavno prikazuju logički najbližu težinu.

Uobičajeni fontovi poput Arial, Helvetica, Georgia, itd. Nemaju težine osim 400i 700. Dakle, isti demo prikazan s jednim od tih fontova prikazivao bi samo dvije težine u devet odlomaka.

Korištenje ključnih riječi „hrabrije“ i „svjetlije“

Vrijednosti ključne riječi bolderi lighterrelativne su prema izračunatoj težini fonta nadređenog elementa. Preglednik će tražiti najbližu „smjeliju“ ili „lakšu“ težinu, ovisno o tome što je dostupno u obitelji fontova, inače će jednostavno odabrati „400“ ili „700“, ovisno o tome što ima najviše smisla.

Podređeni elementi neće naslijediti vrijednosti ključne riječi "hrabrije" i "lakše", već će naslijediti izračunatu težinu.