Encodera

Спасибо, что читаете!

Пожертвуйте сайту, мы стараемся ради вас.

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

Короткий ответ

Жирность задаёт font-weight, курсив — font-style:

<p style="font-weight: 700;">Bold text</p>
<p style="font-style: italic;">Italic text</p>

Степени жирности

font-weight принимает числа от 100 до 900: 400 — обычный текст, 700 — жирный. Промежуточные значения работают, только если у шрифта есть такие начертания.

<p style="font-family: system-ui, sans-serif; font-size: 20px; margin: 0;">
  <span style="font-weight: 300;">Light</span> · <span style="font-weight: 400;">Regular</span> ·
  <span style="font-weight: 600;">Semibold</span> · <span style="font-weight: 800;">Extra bold</span>
</p>

Теги или CSS

Если выделение важно по смыслу — предупреждение, ключевое слово, — используйте strong и em: экранные дикторы и поисковики их понимают. Если это только оформление, например жирные цены в карточках, — CSS.

<p><strong>Warning:</strong> the store closes at <em>6 pm</em> today.</p>

Убрать жирность

Заголовки и th жирные по умолчанию. font-weight: normal (или 400) возвращает обычное начертание.

Частая ошибка

Писать font-weight: bold для шрифта, у которого нет жирного начертания: браузер рисует «поддельный» жирный, размазывая буквы. Подключите файл нужного начертания или выберите шрифт, где оно есть.

Функции из этого ответа

  • font-weight — Насыщенность (жирность) шрифта.
  • font-style — Курсив или обычный текст.
  • <strong> — Важный текст; по умолчанию выделяется жирным.
  • <em> — Смысловое ударение в предложении; по умолчанию — курсив.

Спасибо, что читаете!

Пожертвуйте сайту, мы стараемся ради вас.