Dokumentacja CSS z przykładami: Grubość czcionki

Q: Jak pogrubić tekst w CSS?

Użyj na elemencie font-weight: bold; albo równoważnej liczby font-weight: 700;. Żeby usunąć pogrubienie z nagłówka albo , ustaw font-weight: normal; (400).

Q: Czy font-weight bold to to samo co 700?

Tak. bold daje 700, a normal daje 400, więc obie formy renderują się identycznie.

Q: Używać font-weight w CSS czy znacznika ?

Używaj , gdy słowa są ważne, dla tekstu, który jest tylko inaczej ostylowany, a font-weight do projektu wizualnego, takiego jak przyciski, etykiety i nagłówki. Znaczniki niosą znaczenie; właściwość to tylko wygląd.

Jak pogrubić tekst w CSS

font-weight ustala grubość liter. bold (to samo co 700) pogrubia tekst, a normal (to samo co 400) to zwykły tekst.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Font weight</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 22px; color: #111827; }
    p { margin: 6px 0; }
    .normal { font-weight: normal; }
    .bold { font-weight: bold; }
    .heavy { font-weight: 900; }
    h2.plain { font-weight: normal; }
  </style>
</head>
<body>
  <p class="normal">font-weight: normal (400)</p>
  <p class="bold">font-weight: bold (700)</p>
  <p class="heavy">font-weight: 900</p>
  <h2 class="plain">A heading with font-weight: normal</h2>
</body>
</html>

Nagłówki, <th>,  i  są domyślnie pogrubione przez własny arkusz stylów przeglądarki, więc pogrubienie usuwa się przez font-weight: normal. Kiedy używać  albo  w samym HTML, wyjaśnia strona pogrubienie w HTML.

Skala liczbowa: od 100 do 900

Liczby mają standardowe nazwy, których trzymają się rodziny czcionek:

Wartość	Popularna nazwa
`100`	Thin
`200`	Extra Light
`300`	Light
`400`	Normal (Regular)
`500`	Medium
`600`	Semi Bold
`700`	Bold
`800`	Extra Bold
`900`	Black (Heavy)

Poprawna jest każda liczba od 1 do 1000, więc 450 i 650 też są dozwolone. To, czy zobaczysz różnicę, zależy od czcionki: przeglądarka może narysować tylko te grubości, które czcionka naprawdę ma.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Weight scale</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 22px; color: #111827; }
    p { margin: 4px 0; }
  </style>
</head>
<body>
  <p style="font-weight: 100;">100 Thin</p>
  <p style="font-weight: 200;">200 Extra Light</p>
  <p style="font-weight: 300;">300 Light</p>
  <p style="font-weight: 400;">400 Normal</p>
  <p style="font-weight: 500;">500 Medium</p>
  <p style="font-weight: 600;">600 Semi Bold</p>
  <p style="font-weight: 700;">700 Bold</p>
  <p style="font-weight: 800;">800 Extra Bold</p>
  <p style="font-weight: 900;">900 Black</p>
</body>
</html>

system-ui to czcionka interfejsu systemu operacyjnego, która zwykle ma wiele grubości. Jeśli każda linia powyżej wygląda jak jedna z dwóch grubości, twoja czcionka systemowa ma tylko zwykłą i pogrubioną.

Dlaczego grubość nic nie zmienia

Czcionka to zestaw plików, często po jednym na grubość. Gdy brakuje dokładnej grubości, przeglądarka wybiera najbliższą, którą ma:

Dla 500 próbuje 500, potem cieńszych grubości, potem grubszych.
Dla 600 i więcej najpierw próbuje grubszych, potem cieńszych.
Jeśli nie ma w ogóle pliku pogrubionego, większość przeglądarek go udaje, pogrubiając zwykłe litery (sztuczne pogrubienie).

Porównaj czcionkę z wieloma grubościami z serif, który w większości systemów ma tylko zwykłą i pogrubioną:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Missing weights</title>
  <style>
    body { font-size: 22px; color: #111827; }
    .col { display: inline-block; vertical-align: top; margin-inline-end: 32px; }
    .sans { font-family: system-ui, sans-serif; }
    .serif { font-family: Georgia, serif; }
    p { margin: 4px 0; }
  </style>
</head>
<body>
  <div class="col sans">
    <p style="font-weight: 300;">300 sans</p>
    <p style="font-weight: 500;">500 sans</p>
    <p style="font-weight: 600;">600 sans</p>
  </div>
  <div class="col serif">
    <p style="font-weight: 300;">300 serif</p>
    <p style="font-weight: 500;">500 serif</p>
    <p style="font-weight: 600;">600 serif</p>
  </div>
</body>
</html>

W kolumnie serif 300 i 500 zwykle spadają do zwykłego kroju, a 600 do pogrubionego. To odpowiedź na większość pytań "font-weight nie działa": CSS jest w porządku, a czcionce brakuje grubości. Font zmienny (jeden plik z osią grubości) płynnie rysuje każdą wartość w swoim zakresie grubości.

bolder i lighter

bolder i lighter są względne wobec grubości dziedziczonej przez element. Przechodzą do następnej grupy grubości zamiast dodawać stałą wartość:

Grubość rodzica	`bolder` daje	`lighter` daje
od 100 do 349	400	100
od 350 do 549	700	100
od 550 do 749	900	400
od 750 do 900	900	700

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>bolder and lighter</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 20px; color: #111827; }
    .bolder { font-weight: bolder; }
    .lighter { font-weight: lighter; }
  </style>
</head>
<body>
  <p style="font-weight: 400;">400 with <span class="bolder" id="a">bolder</span> and <span class="lighter" id="b">lighter</span></p>
  <p style="font-weight: 700;">700 with <span class="bolder" id="c">bolder</span> and <span class="lighter" id="d">lighter</span></p>
  <p id="out"></p>
  <script>
    const w = (id) => getComputedStyle(document.getElementById(id)).fontWeight;
    document.getElementById('out').textContent =
      'computed: ' + w('a') + ', ' + w('b') + ', ' + w('c') + ', ' + w('d');
  </script>
</body>
</html>

Praktyczny wzorzec: skala grubości w zmiennych

Wybierz trzy albo cztery grubości dla całej witryny i nadaj im nazwy, zamiast rozrzucać liczby:

:root {
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;
}
body   { font-weight: var(--weight-regular); }
button { font-weight: var(--weight-medium); }
h1, h2 { font-weight: var(--weight-bold); }

Częste błędy

Oczekiwanie, że każda liczba będzie wyglądać inaczej. Wyraźnie różnią się tylko grubości, które zawiera czcionka.
Używanie  do etykiety przycisku. Ostyluj przycisk przez font-weight;  i  zostaw dla tekstu.
Liczba w cudzysłowie. font-weight: "700" jest niepoprawne i ignorowane. Napisz font-weight: 700.
Pogrubienie wszędzie dla podkreślenia. Gdy wszystko jest pogrubione, nic się nie wyróżnia. Tekst główny zostaw na 400.
Cienkie grubości dla małego tekstu. Grubości od 100 do 300 w małych rozmiarach są trudne do przeczytania, zwłaszcza na tłach o niskim kontraście.

Najczęściej zadawane pytania

Jak pogrubić tekst w CSS?

Użyj na elemencie font-weight: bold; albo równoważnej liczby font-weight: 700;. Żeby usunąć pogrubienie z nagłówka albo , ustaw font-weight: normal; (400).

Jakie są wartości font-weight?

Liczby od 1 do 1000, zwykle zapisywane w setkach: 100 thin, 200 extra light, 300 light, 400 normal, 500 medium, 600 semibold, 700 bold, 800 extra bold, 900 black. Słowa kluczowe normal i bold to 400 i 700, a bolder i lighter są względne wobec rodzica.

Czy font-weight bold to to samo co 700?

Tak. bold daje 700, a normal daje 400, więc obie formy renderują się identycznie.

Dlaczego font-weight 500 albo 600 wygląda tak samo jak normal albo bold?

Czcionka nie ma tej grubości. Gdy czcionka ma tylko 400 i 700, przeglądarka wybiera najbliższy dostępny plik, więc 500 wygląda jak 400, a 600 jak 700. Wczytaj czcionkę z większą liczbą grubości albo font zmienny.

Używać font-weight w CSS czy znacznika ?

Używaj , gdy słowa są ważne,  dla tekstu, który jest tylko inaczej ostylowany, a font-weight do projektu wizualnego, takiego jak przyciski, etykiety i nagłówki. Znaczniki niosą znaczenie; właściwość to tylko wygląd.

Powiązane zagadnienia