Как сделать текст жирным в css

Если нужно быстро понять, как сделать текст жирным в css, достаточно знать одно основное свойство и несколько нюансов его работы. Ниже — практичные способы, ограничения и проверка результата в браузере.

Основное свойство

За насыщенность шрифта отвечает font-weight. Самый простой вариант — задать значение bold:

p {
  font-weight: bold;
}

Это изменит толщину текста, если подключённый шрифт поддерживает жирное начертание. Во многих случаях браузер подставляет его автоматически, но лучше задавать стиль явно.

Числовые значения тоже допустимы. Обычно используются:

• 400 — обычный текст;
• 700 — жирный;
• 600 — полужирный, если шрифт это поддерживает.

Если вы ищете, как сделать текст жирным в css для заголовка, ссылки или отдельного слова, принцип тот же: правило можно назначить любому селектору.

Когда жирность может не сработать

Иногда кажется, что стиль не применился, хотя правило написано правильно. Чаще всего причина в шрифте. Не каждый шрифт содержит все начертания, и тогда браузер имитирует жирность либо почти не меняет внешний вид.

Проверьте несколько моментов:

• Не перекрывает ли стиль другое правило с большей специфичностью;
• Не задан ли родительскому элементу более сильный вес, который уже наследуется;
• Поддерживает ли шрифт нужное значение font-weight;
• Не используется ли изображение, SVG или элемент, к которому текстовый стиль неприменим.

Если нужно сделать жирным только часть строки, оберните её в span и задайте вес этому элементу.

p span {
  font-weight: 700;
}

Такой приём удобен, когда в одном абзаце нужно выделить важное слово без изменения всего текста.

Полезные варианты применения

Жирный текст используют не только для акцента, но и для структуры интерфейса. Например, им выделяют названия разделов, подписи в таблицах, важные цифры или активные пункты меню. Главное — не переборщить: если всё выделено одинаково, акцент теряется.

Практически вёрстка выглядит так:

.note {
  font-weight: 600;
}

strong {
  font-weight: 700;
}

Если в разметке уже есть тег strong или b, браузер обычно делает текст жирнее по умолчанию. Но в CSS можно переопределить это поведение, если дизайн требует другого веса.

• b и strong полезны для семантики и доступности;
• font-weight нужен, когда важен именно визуальный результат;
• Комбинация тегов и CSS помогает сохранить и смысл, и оформление.

Как проверить результат

После добавления правила откройте страницу в браузере и сравните текст до и после изменения. Если разница не заметна, временно задайте очень контрастный вес, например 700 вместо 400, и посмотрите, изменилось ли начертание.

1. Откройте DevTools и выберите нужный элемент.
2. Посмотрите, какое значение font-weight реально применяется.
3. Если правило зачёркнуто, ищите более приоритетный стиль.
4. Если значение есть, а вид не меняется, проверьте сам шрифт.

Так вы быстро поймёте, как сделать текст жирным в css без лишних догадок: задайте font-weight, убедитесь, что стиль не перебит, и проверьте поддержку начертания в выбранном шрифте. Если нужен акцент на части строки, используйте отдельный элемент и повторите настройку только для него.