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-weight
– 100
(тонкий, волосинний шрифт) чи 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 | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
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 |