Коротко: жирность текста в CSS задаёт свойство font-weight. Значения бывают словесные — normal и bold — и числовые от 100 до 900. Числовые значения работают точнее, если шрифт содержит нужные начертания.
Значения font-weight
| Значение | Соответствие |
|---|---|
normal |
400 |
bold |
700 |
100–300 |
тонкие начертания |
500–600 |
средние |
800–900 |
очень жирные |
Применение
.title { font-weight: 700; }
.label { font-weight: 500; }
.light { font-weight: 300; }Числа понятнее в работе: видно градацию, в отличие от двух словесных значений. Но они дадут эффект только если соответствующее начертание подключено.
Вкладки: тонкости
@font-face {
font-family: 'My';
src: url('my-bold.woff2');
font-weight: 700;
}Каждое начертание подключают отдельным правилом @font-face с указанием веса. Тогда браузер берёт настоящий жирный шрифт, а не дорисовывает.
bolder и lighter задают вес относительно родителя. Использовать их стоит осторожно: результат зависит от контекста и может удивить.
h2 { font-synthesis: none; }Если шрифт без жирного начертания, браузер может «подделать» жирность. Свойство font-synthesis: none запрещает такое — текст будет честным.
<strong> и <em>, а font-weight применяйте в оформлении заголовков и элементов интерфейса.Практика: настроить жирность
- Проверьте, какие начертания есть в шрифте.
- Подключите нужные файлы через
@font-face. - Задайте жирность заголовкам числовыми значениями.
- Для акцентов в тексте используйте
<strong>. - Проверьте, не «подделывает» ли браузер жирность.
- Сравните виды на разных устройствах.
Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Жирность не меняется | нет начертания | подключить нужный вес |
| Текст выглядит «грязно» | синтетический жирный | подключить настоящий или запретить синтез |
| Значение не работает | шрифт только с одним весом | ограничиться доступными |
| Заголовки «прыгают» | разные веса | задать единую систему |
| Слишком много жирного | выделено всё | оставить акценты |
Проверьте себя
bold?
Вопросы и ответы
Скорее всего, в шрифте нет нужного начертания, поэтому браузеру нечего взять. Подключите соответствующий файл шрифта с нужным весом.
Это когда браузер «дорисовывает» толщину, если настоящего жирного начертания нет. Выглядит грубее, поэтому лучше подключить полноценный шрифт.
<strong> — это смысловое выделение в тексте, о котором узнают скринридеры. font-weight — чисто визуальное оформление, например жирный заголовок.
Обычно два-три: 400 для текста, 700 для заголовков и выделений, иногда 500 для интерфейсных элементов. Каждый вес — отдельный файл и вес страницы.
Итоги
- Жирность задаёт
font-weight. - Числовые значения от 100 до 900 точнее словесных.
boldсоответствует 700,normal— 400.- Для смыслового выделения в тексте используйте
<strong>.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.