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-weight
– 100
(тонкий, волосинний шрифт) чи 200
(украй легкий), особливо коли шрифт має низьке співвідношення контрасту кольорів.
- MDN розуміння WCAG, пояснення Настанов 1.4
- Розуміння критерію успіху 1.4.8 | W3C розуміння WCAG 2.0 (англ.)
Формальне визначення
Початкове значення | 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 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 |