Właściwość CSSTypografia
font-weight
Ustawia grubość czcionki, od cienkiej po bardzo pogrubioną.
- Wartość domyślna
normal- Dziedziczona
- Tak
- Animowalna
- tak, jako liczba
- Dotyczy
- wszystkie elementy
- JavaScript
element.style.fontWeight = "600"
Przykład
#CSS
h2 {
font-weight: 600;
}
.price {
font-weight: 800;
}HTML przykładu
<h2 style="font-weight: 600; margin: 0">Plan Premium</h2>
<p style="margin: 6px 0 0"><span class="price" style="font-weight: 800; font-size: 24px;">29 zł</span> miesięcznie</p>Podgląd
Definicja i zastosowanie
#Właściwość font-weight określa grubość znaków. Przyjmuje słowa normal (400) i bold (700) albo liczby od 1 do 1000, najczęściej w setkach: 100 to bardzo cienka, 900 bardzo gruba.
Grubość wyświetli się poprawnie tylko wtedy, gdy krój ma daną wersję. Jeśli jej nie ma, przeglądarka wybierze najbliższą dostępną albo sztucznie pogrubi tekst, co zwykle wygląda gorzej.
Kroje zmienne (variable fonts) zawierają płynny zakres grubości w jednym pliku, więc możesz używać dowolnych wartości, na przykład 550.
Składnia
#Składnia
font-weight: normal | bold | lighter | bolder | <liczba 1–1000>;Wartości
#Wartości w praktyce
#300
Cienka, lekka grubość.
.demo { font-weight: 300; }normal
Zwykła grubość tekstu.
.demo { font-weight: normal; }600
Półgruba, popularna w nagłówkach.
.demo { font-weight: 600; }bold
Wyraźne pogrubienie tekstu.
.demo { font-weight: bold; }900
Najgrubsza wersja, jeśli krój ją ma.
.demo { font-weight: 900; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Dołączaj tylko te grubości czcionki, których używasz. Każda to osobny plik do pobrania, chyba że korzystasz z kroju zmiennego.
- Znacznik
<strong>oznacza ważność treści. Do samego pogrubienia bez znaczenia użyj CSS.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.