Свойство CSS font-weight
Узнайте, как CSS font-weight управляет толщиной текста с помощью ключевых слов (normal, bold) и числовых значений (100–900), а также правил разрешения bolder/lighter.
Свойство CSS font-weight задаёт, насколько жирными или толстыми выглядят символы шрифта. Вы можете указать насыщенность с помощью ключевого слова (normal, bold), относительного ключевого слова (bolder, lighter) или числового значения от 100 до 900.
Гарнитура обычно поставляется с несколькими отдельными начертаниями в виде отдельных файлов шрифта. Браузер может отображать только те начертания, которые реально предоставляет шрифт. Многие шрифты включают лишь два — normal (400) и bold (700) — поэтому запрос font-weight: 300 может быть заменён ближайшим доступным начертанием, а не настоящим тонким вариантом. Переменные шрифты — исключение: они содержат непрерывную ось насыщенности и могут отображать любое значение без отдельных файлов.
На этой странице рассматриваются ключевые и числовые значения, правила разрешения bolder / lighter, анимация насыщенности и поведение браузера при отсутствии запрошенного начертания.
| Начальное значение | normal |
|---|---|
| Применяется к | Всем элементам. Также применяется к ::first-letter и ::first-line. |
| Наследуется | Да. |
| Анимируется | Да. |
| Версия | CSS1 |
| Синтаксис DOM | object.style.fontWeight = "bolder"; |
Синтаксис
font-weight: normal | bold | bolder | lighter | <number> | initial | inherit;Значения
| Значение | Описание |
|---|---|
normal | Начертание по умолчанию. Эквивалентно 400. |
bold | Полужирное начертание. Эквивалентно 700. |
bolder | На один шаг тяжелее вычисленного начертания родительского элемента (см. таблицу ниже). |
lighter | На один шаг легче вычисленного начертания родительского элемента (см. таблицу ниже). |
100–900 | Числовая насыщенность с шагом 100 — от тонкого (100) до самого жирного (900). |
initial | Сбрасывает свойство до начального значения (normal). |
inherit | Наследует вычисленное начертание от родительского элемента. |
Базовый пример
В примере ниже к абзацу применяется значение bolder, чтобы он выглядел тяжелее окружающего текста.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p.bolder {
font-weight: bolder;
}
</style>
</head>
<body>
<h2>Font-weight property example</h2>
<p class="bolder">We used a bolder text here.</p>
</body>
</html>Результат
Все ключевые и числовые значения
В примере ниже все основные значения показаны рядом, чтобы можно было сравнить их визуально.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p.normal {
font-weight: normal;
}
p.lighter {
font-weight: lighter;
}
p.bold {
font-weight: bold;
}
p.bolder {
font-weight: bolder;
}
p.fweight {
font-weight: 600;
}
</style>
</head>
<body>
<h2>Font-weight property example</h2>
<p class="normal">We used normal weight here.</p>
<p class="lighter">This is a lighter weight.</p>
<p class="bold">We used bold weight here.</p>
<p class="bolder">We used a bolder text here.</p>
<p class="fweight">We set font-weight 600 here.</p>
</body>
</html>Числовая шкала насыщенности
Числовые значения варьируются от 100 (самое тонкое) до 900 (самое жирное) с шагом 100. Каждый шаг имеет общепринятое название, используемое дизайнерами шрифтов:
| Значение | Общее название |
|---|---|
| 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) |
normal соответствует 400, а bold соответствует 700, поэтому эти пары «ключевое слово / число» всегда взаимозаменяемы. Используйте числовое значение, когда нужен более тонкий контроль — например, font-weight: 500 даёт «среднее» начертание заголовка, которое тяжелее основного текста, но легче полностью жирного.
Когда шрифт не поддерживает запрошенное начертание
Если шрифт не предоставляет точно запрошенное начертание, браузер использует ближайшее доступное. Именно поэтому font-weight: 100 и font-weight: 300 могут выглядеть одинаково, если шрифт поставляется только с 400 (Regular) и 700 (Bold). Всегда загружайте или объявляйте те конкретные начертания, которые используются в вашем дизайне — см. @font-face и font-display для эффективной реализации.
Как разрешаются значения bolder и lighter
bolder и lighter являются относительными по отношению к унаследованному начертанию родительского элемента. Они не просто прибавляют или вычитают 100. Вместо этого браузер сопоставляет вычисленное начертание родителя с более грубой трёхуровневой шкалой, прежде чем применить шаг:
| Унаследованное начертание | 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 |
Это означает, что вложение двух элементов с bolder не приводит к бесконечному нарастанию насыщенности — достигнув 900, она там и остаётся.
<!DOCTYPE html>
<html>
<head>
<title>bolder resolution example</title>
<style>
.parent {
font-weight: 400; /* normal */
}
.child {
font-weight: bolder; /* resolves to 700 */
}
.grandchild {
font-weight: bolder; /* resolves to 900, then stops */
}
</style>
</head>
<body>
<p class="parent">
Parent at normal (400).
<span class="child">
Child becomes bold (700).
<span class="grandchild">Grandchild becomes black (900).</span>
</span>
</p>
</body>
</html>Анимация font-weight
font-weight поддерживает анимацию, поэтому вы можете плавно переходить между начертаниями с помощью CSS-переходов или анимаций. Плавная интерполяция работает только с переменными шрифтами, поскольку у статических шрифтов есть лишь дискретные файлы начертаний. На статическом шрифте браузер переключается на ближайшее доступное начертание в середине перехода.
.heading {
font-weight: 400;
transition: font-weight 0.3s ease;
}
.heading:hover {
font-weight: 700;
}Для непрерывных плавных изменений насыщенности — например, hover-эффект, плавно переходящий от тонкого к жирному — используйте переменный шрифт со свойством font-variation-settings:
.heading {
/* "wght" is the weight axis on variable fonts */
font-variation-settings: "wght" 400;
transition: font-variation-settings 0.3s ease;
}
.heading:hover {
font-variation-settings: "wght" 700;
}Советы и доступность
- Загружайте только те начертания, которые используете. При подключении шрифтов из Google Fonts или другого сервиса явно указывайте каждое начертание в URL или дескрипторе
@font-face. Если начертание не загружено, браузер синтезирует поддельный bold, который зачастую хуже настоящего варианта. - Не используйте только насыщенность для передачи смысла. Жирный текст — лишь визуальный сигнал. Для текста, несущего семантическую важность, используйте
<strong>(который по умолчанию имеетfont-weight: bold), чтобы вспомогательные технологии могли передать это выделение. - Следите за контрастом на тонких начертаниях. Значения
100–300уменьшают толщину штриха и могут не соответствовать порогам контрастности WCAG, особенно при малых размерах и на цветных фонах. Проверяйте соотношение контрастности с помощью инструмента выбора цвета и используйте для основного текста400или тяжелее. - Отдавайте предпочтение числовым значениям в дизайн-системах. Ключевые слова вроде
boldслишком грубые. Использование700делает намерение явным и облегчает аудит.
Связанные свойства
- font — сокращённое свойство, задающее
font-weightвместе со стилем, размером и гарнитурой в одном объявлении. - font-style — управляет курсивным и наклонным вариантами.
- font-size — задаёт размер текста.
- font-family — выбирает используемую гарнитуру.
- @font-face — объявляет пользовательские шрифты и доступные диапазоны насыщенности.
- font-display — управляет отображением текста браузером в процессе загрузки пользовательского шрифта.