Насиченість шрифту в CSS — властивість font-weight

Привіт:) Сьогодні розповім про одну із CSS-властивостей для керування шрифтом — font-weight, яка відповідає за його насиченість або товщину.

Шрифт візуально може бути звичайним, жирнішим або тоншим. Ця насиченість встановлюється за допомогою властивості font-weight. Її значенням може бути ключове слово чи число.

Поширені значення font-weight:

400 або normal — звичайний шрифт, значення за замовчуванням;
700 або bold — жирний шрифт.

Приклад:

h2 {
  font-weight: 400; /* аналогічно normal */
}

p {
  font-weight: bold; /* аналогічно 700 */
}

CSS-властивість font-weight може приймати один з 10-ти числових варіантів насиченості:

100 — Thin (Hairline)
200 — Extra Light (Ultra Light)
300 — Light
400 — Normal (Regular)
500 — Medium
600 — Semi Bold (Demi Bold)
700 — Bold
800 — Extra Bold (Ultra Bold)
900 — Black (Heavy)
950 — Extra Black (Ultra Black)

Всі ці числові значення задають ступінь товщини шрифту: від найтоншого до найтовстішого.

Але в більшості системних шрифтів все одно є лише два варіанти товщини: звичайний normal (400) та жирний bold (700). Тому інші значення застосовуються рідше.

Крім перелічених вище числових значень у font-weight може бути ще два відносні значення: bolder і lighter. Вони роблять шрифт більш жирнішим і тоншим відносно поточного або успадкованого значення.

CSS-властивість font-weight — насиченість шрифту

Михайло Петров