Waga czcionki - CSS-Tricks | Almanach CSS 2025

Ta font-weightwłaściwość określa grubość lub grubość czcionki i zależy od dostępnych krojów czcionek w rodzinie czcionek lub od grubości zdefiniowanych przez przeglądarkę.

span ( font-weight: bold; )

font-weightNieruchomość akceptuje albo wartość słowa kluczowego lub predefiniowaną wartość liczbową. Dostępne słowa kluczowe to:

normal
bold
bolder
lighter

Dostępne wartości liczbowe to:

100
200
300
400
500
600
700
800
900

Wartość słowa kluczowego jest normalodwzorowywana na wartość liczbową, 400a wartość boldna 700.

Aby zobaczyć jakikolwiek efekt przy użyciu wartości innych niż 400lub 700, używana czcionka musi mieć wbudowane twarze, które pasują do tych określonych grubości.

Jeśli czcionka ma pogrubioną („700”) lub normalną („400”) wersję jako część rodziny czcionek, przeglądarka będzie jej używać. Jeśli te nie są dostępne, przeglądarka naśladuje własną pogrubioną lub normalną wersję czcionki. Nie naśladuje innych niedostępnych wag. Czcionki często używają nazw, takich jak „Zwykła” i „Jasna”, w celu określenia alternatywnych grubości czcionek.

Poniższe demo demonstruje użycie alternatywnych wartości wagi:

Sprawdź ten długopis!

Powyższe demo wykorzystuje bezpłatną czcionkę Open Sans, osadzoną za pomocą Google Web Fonts API. Czcionka jest ładowana ze wszystkimi dostępnymi grubościami czcionki, a więc przy użyciu font-weightwłaściwości wyświetlane są różne dostępne grubości, zgodnie z opisem w tekście każdego akapitu. Niedostępne wagi wyświetlają po prostu logicznie najbliższą wagę.

Popularne czcionki, takie jak Arial, Helvetica, Georgia itp., Nie mają innych grubości niż 400i 700. Tak więc to samo demo wyświetlane z jedną z tych czcionek wyświetli tylko dwie wagi w dziewięciu akapitach.

Używanie „pogrubionych” i „lżejszych” słów kluczowych

Wartości słowa kluczowego bolderi lighterodnoszą się do obliczonej grubości czcionki elementu nadrzędnego. Przeglądarka będzie szukać najbliższej „odważniejszej” lub „lżejszej” grubości, w zależności od tego, co jest dostępne w rodzinie czcionek, w przeciwnym razie po prostu wybierze „400” lub „700”, w zależności od tego, która jest najbardziej sensowna.

Elementy podrzędne nie odziedziczą „pogrubionych” i „lżejszych” wartości słów kluczowych, ale zamiast tego odziedziczą obliczoną wagę.