font-weight

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

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

Синтаксис

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

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

/* Числові значення - ключові слова */
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: inherit;
font-weight: initial;
font-weight: revert;
font-weight: revert-layer;
font-weight: unset;

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

Значення

normal

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

bold

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

lighter

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

bolder

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

<number>

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

В раніших версіях специфікації font-weight ця властивість приймала лише ключові слова й числові значення 100, 200, 300, 400, 500, 600, 700, 800 та 900; незмінні шрифти насправді можуть користуватися лише значеннями з цього набору, натомість дрібні значення (наприклад, 451) перекладаються для незмінних шрифтів у одне з цих значень за допомогою системи Запасних ваг.

Рівень 4 Специфікації шрифтів CSS розширює синтаксис для приймання будь-якого числа від 1 до 1000 і запроваджує Змінні шрифти, котрі можуть застосовувати будь-яке з набагато дрібніших значень ваги шрифту.

Запасні ваги

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

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

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

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

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

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

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

Успадковане значення 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".

Примітка: Щоб приклад нижче працював, потрібен браузер, котрий підтримує синтаксис CSS шрифтів рівня 4, в котрому font-weight може бути будь-яким числом між 1 і 1000. Демо завантажується з font-weight: 500;. Змінюйте це значення, аби побачити, як зміниться вага тексту.

Занепокоєння щодо доступності

Люди з проблемами зору можуть мати складнощі при читанні тексту, чиє значення 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 No
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

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