font-weight

Властивість CSS font-weight (вага шрифту) задає вагу (чи грубину) шрифту. Доступні ваги залежать від конкретної заданої font-family.

Спробуйте його в дії

Синтаксис

/* Значення – ключові слова <font-weight-absolute> */
font-weight: normal;
font-weight: bold;

/* Числові значення <font-weight-absolute> [1,1000] */
font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400; /* normal */
font-weight: 500;
font-weight: 600;
font-weight: 700; /* bold */
font-weight: 800;
font-weight: 900;

/* Значення – ключові слова, що є відносними щодо батьківського елемента */
font-weight: lighter;
font-weight: bolder;

/* Глобальні значення */
font-weight: inherit;
font-weight: initial;
font-weight: revert;
font-weight: revert-layer;
font-weight: unset;

Властивість font-weight задається за допомогою або значення <font-weight-absolute>, або відносного значення ваги, як перелічено нижче.

Значення

normal

Звичайна вага шрифту. Те саме, що 400.

bold

Груба вага шрифту. Те саме, що 700.

<number>

Значення <number> від 1 до 1000 включно. Більші числа представляють ваги, грубіші (або так само грубі) за менші числа. Завдяки цьому можливий детальний контроль змінних шрифтів. У випадку незмінних шрифтів, якщо задана конкретна вага недоступна, використовується алгоритм запасної ваги: числові значення, що діляться на 100, відповідають загальноприйнятим назвам ваг, як описано в розділі Загальноприйняте відображення імен ваг нижче.

lighter

На одну відносну вагу шрифту легше, ніж батьківський елемент. Зверніть увагу, що для відносного обчислення ваги рахуються лише чотири ваги шрифту; дивіться розділ Значення відносних ваг нижче.

bolder

На одну відносну вагу шрифту важче, ніж батьківський елемент. Зверніть увагу, що для відносного обчислення ваги рахуються лише чотири ваги шрифту; дивіться розділ Значення відносних ваг нижче.

Запасні ваги

Якщо конкретна задана вага – недоступна, то для визначення фактично відтвореної ваги застосовується наступне правило:

  • Якщо цільова задана вага – від 400 до 500 включно:

    • Шукати доступні ваги між цільовою і 500, у порядку зростання.
    • Якщо збігу не знайдено, шукати доступні ваги, менші за цільову, в порядку спадання.
    • Якщо збігу не знайдено, шукати доступні ваги, більші за 500, у порядку зростання.
  • Якщо задана вага, менша за 400 шукати доступні ваги, менші за цільову, в порядку спадання. Якщо збігу не знайдено, шукати доступні ваги, більші за цільову, в порядку зростання.

  • Якщо задана вага, більша за 500, шукати доступні ваги, більші за цільову, в порядку зростання. Якщо збігу не знайдено, шукати доступні ваги, менші за цільову, в порядку спадання.

[!NOTE] Алгоритм запасних ваг використовується лише для візуалізації. Обчисленим (computed) значенням властивості все одно є задане значення.

Значення відносних ваг

Коли вказано lighter чи bolder, діаграма нижче демонструє, як визначається абсолютна вага шрифту елемента.

Зверніть увагу, що при застосуванні відносних ваг рахуються лише чотири ваги – тонка (100), звичайна (400), груба (700) і тяжка (900). Якщо сімейство шрифту має більше доступних ваг, то для потреб відносного обчислення ваг вони ігноруються

Успадковане значення bolder lighter
100 400 100
200 400 100
300 400 100
400 700 100
500 700 100
600 900 400
700 900 400
800 900 700
900 900 700

Загальноприйняте відображення імен ваг

Числові значення від 100 до 900 приблизно відповідають наступним загальноприйнятим іменам ваг (дивіться Специфікацію OpenType):

Значення Загальноприйняте ім'я ваги
100 Тонка (волосинна)
200 Особливо легка (украй легка)
300 Легка
400 Звична (звичайна)
500 Середня
600 Напівгруба
700 Груба
800 Особливо груба (украй груба)
900 Чорна (Тяжка)
950 Особливо чорна (украй чорна)

Змінні шрифти

Хоч більшість шрифтів має конкретну вагу, що відповідає кожному з чисел у Загальноприйнятому відображенні імен ваг, чимало змінних шрифтів підтримують певний діапазон ваг, що надає дизайнерам та розробникам набагато детальніший контроль над обраною вагою.

У змінних шрифтах TrueType та OpenType для реалізації змінної ширини застосовується варіація "wght".

Це демо завантажується з заданим font-weight: 500;. Змініть значення властивості font-weight, аби побачити, як зміниться вага тексту.

Доступність

Люди з проблемами зору можуть мати складнощі при читанні тексту, чиє значення font-weight100 (тонкий, волосинний шрифт) чи 200 (украй легкий), особливо коли шрифт має низьке співвідношення контрасту кольорів.

Формальне визначення

Початкове значенняnormal
Успадковуєтьсятак
Обчислене значенняthe keyword or the numerical value as specified, with bolder and lighter transformed to the real value

Формальний синтаксис

<font-weight-absolute> | bolder | lighter

де
<font-weight-absolute> = normal | bold | <number [1,1000]>

Приклади

Задання ваг шрифтів

HTML

<p>
  Одного погожого дня прийшла Оленка до бабусі. Камінцем кинула в курочку,
  собачці Жучці показала язика і зайшла до хатинки. А бабуся в цей час спекла
  хліб. На столі поклала. Пахучий, теплий ще. Із шкоринкою золотавою. Пригостила
  бабуся онуку окрайцем хліба. Дівчинка взяла і побігла на подвір'я гуляти.
</p>

<div>
  Я тяжкий<br />
  <span>Я легший</span>
</div>

CSS

/* Зробити текст абзацу грубим. */
p {
  font-weight: bold;
}

/* Зробити текст div на дві позначки важчим за
   звичайний, але легшим за стандартний грубий. */
div {
  font-weight: 600;
}

/* Зробити текст span на одну позначку легшим
   за свого предка. */
span {
  font-weight: lighter;
}

Результат

Специфікації

Сумісність із браузерами

desktop mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on iOS Samsung Internet
font-weight
Chrome Full support 2
Edge Full support 12
Firefox Full support 1
Internet Explorer Full support 3
Opera Full support 3.5
Safari Full support 1
WebView Android Full support 1
Chrome Android Full support 18
Firefox for Android Full support 4
Opera Android Full support 10.1
Safari on iOS Full support 1
Samsung Internet Full support 1.0
<number> syntax
Chrome Full support 62
Edge Full support 17
Firefox Full support 61
Internet Explorer No support Ні
Opera Full support 49
Safari Full support 11
WebView Android Full support 62
Chrome Android Full support 62
Firefox for Android Full support 61
Opera Android Full support 46
Safari on iOS Full support 11
Samsung Internet Full support 8.0

Дивіться також