font-weight задаёт насыщенность (жирность) текста. Можно написать словом - normal (обычный) или bold (жирный), а можно числом от 100 до 900 с шагом 100 для более точной настройки. normal равен числу 400, а bold - числу 700.
В этом уроке
Попробуй прямо сейчас: смени font-weight у любого абзаца на другое число от 100 до 900 - шрифт станет тоньше или толще.
normal и bold: два основных значения
Это два самых частых значения: normal - обычная насыщенность (по умолчанию у большинства текста), bold - жирный. За кулисами normal равен числу 400, а bold равен числу 700 - можно писать любым из двух способов, результат один и тот же.
font-weight: bold; - то же самое, что font-weight: 700;.
font-weight: жирный; - работают только определённые английские слова (normal, bold, bolder, lighter) и числа, а не перевод на русский.
Числа от 100 до 900: точная настройка
Если в шрифте есть несколько промежуточных начертаний (не только обычное и жирное, а ещё тонкое, полужирное и так далее), можно указать точное число: 100 - самое тонкое, 900 - самое жирное, с шагом 100 между ними. Это работает только если в самом шрифте реально есть файл с таким начертанием.
font-weight: 600; - подходит, если в шрифте действительно есть полужирное (semi-bold) начертание.
font-weight: 550; у обычного шрифта без такого начертания - браузер не создаст несуществующее начертание из ничего, а подберёт ближайшее доступное или нарисует его сам.
Если в шрифте нет нужной насыщенности
Если у шрифта нет отдельного файла для запрошенной жирности (например, подключено только обычное начертание, а указан font-weight: 700), браузер не откажется выполнять команду - он сам "дорисовывает" жирность, утолщая буквы обычного начертания. Получается не настоящий жирный шрифт, а его имитация, обычно менее аккуратная, чем при использовании реального жирного файла.
Подключить нужное начертание отдельным файлом через @font-face (см. предыдущий урок) - тогда font-weight: 700 покажет настоящее жирное начертание.
font-weight: 700; без подключённого жирного начертания - результат будет "поддельным" жирным, нарисованным браузером на лету.
Частые ошибки новичков
| Ошибка | Что происходит | Как исправить |
|---|---|---|
| Используют <b> или <strong> только чтобы визуально сделать текст жирным | Эти теги обозначают смысловое выделение, а не просто «сделай жирным» - для чисто визуального эффекта это лишний тег | Для чисто визуальной жирности достаточно font-weight: bold в CSS, без дополнительного тега |
| Указали число, которого нет в самом файле шрифта (например 550 у обычного шрифта) | Браузер подбирает ближайшее доступное начертание или рисует псевдо-жирный текст сам | Использовать числа, для которых в шрифте реально есть отдельное начертание |
| Указали font-weight: bold, не подключив жирное начертание через @font-face | Браузер вынужден нарисовать псевдо-жирный текст - буквы толще, но обычно менее аккуратные, чем настоящий жирный шрифт | Подключать нужные начертания отдельными файлами через @font-face |
| Путают жирность (font-weight) с наклоном (font-style) | Это два разных свойства - одно не заменяет другое | Для наклона использовать font-style: italic, для толщины - font-weight |
Шпаргалка
| Что нужно | Как сделать |
|---|---|
| Обычный текст | font-weight: normal; (то же самое, что 400) |
| Жирный текст | font-weight: bold; (то же самое, что 700) |
| Точная настройка | Числа от 100 до 900 с шагом 100 - если начертание есть в шрифте |
| По умолчанию уже жирные | h1-h6, <b> и <strong> - браузер сам ставит им font-weight: 700 |
| Не для наклона | За наклон отвечает font-style, а не font-weight |
Коротко: отвечаем на вопросы
Почему одни значения font-weight пишут словами (normal, bold), а другие - числами?
Оба варианта работают одинаково - normal и bold это просто более понятные обозначения для чисел 400 и 700. Числа нужны, когда хочется более точной настройки, чем просто «обычный» или «жирный».
Указал font-weight, но текст визуально не стал жирнее - в чём может быть проблема?
Скорее всего, в подключённом шрифте просто нет отдельного файла для этой насыщенности - браузер либо подставляет ближайшее доступное начертание, либо рисует эффект жирности сам, и разница может быть почти незаметна в зависимости от шрифта.
Чтобы просто сделать текст жирным, лучше использовать тег <b> или font-weight в CSS?
Если жирность нужна только визуально, без смыслового выделения - font-weight в CSS. Тег <b> (и тем более <strong>) означает смысловое выделение текста, а не просто «сделай жирным».
