font-weight: насыщенность шрифта
font-weight управляет насыщенностью начертания и позволяет отделять основной текст от визуальных акцентов.
Назначение
font-weight управляет насыщенностью начертания и позволяет отделять основной текст от визуальных акцентов.
Как это работает
normal соответствует 400, bold — 700. Числовой диапазон у переменных шрифтов шире привычных сотен, но доступный результат определяется самим шрифтом и подключёнными файлами начертаний.
Пример
<style>
.normal{font-weight:400}.accent{font-weight:700}
</style>
<p class="normal">Обычное пояснение к примеру.</p><p class="accent">Важное визуальное выделение.</p>Что должно получиться
Второй абзац выглядит более насыщенным при наличии подходящего начертания. Свойство не добавляет семантической важности, для которой в HTML существует strong.
Граница применения и частая ошибка
Если нужного начертания нет, браузер может подобрать или синтезировать его. Не считайте изменение числового значения доказательством загрузки настоящего отдельного файла.
Самостоятельная проверка
Сравните 400 и 700 на одинаковом тексте. В своём проекте откройте сведения о фактически использованном шрифте и проверьте, существует ли запрошенное начертание.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Для проверки сетевых запросов, отправки данных или функций браузера используйте отдельную локальную страницу.