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. Вони роблять шрифт більш жирнішим і тоншим відносно поточного або успадкованого значення.

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

Мене звати Михайло. Я — WordPress-розробник. Створюю візитки, корпоративні сайти, блоги на WordPress.

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *