В CSS жирность текста управляется с помощью свойства font-weight. Оно принимает числовые значения от 100 до 900 с шагом 100, где 400 соответствует нормальному весу, а 700 – стандартной жирности. Кроме чисел, допустимы ключевые слова normal и bold, которые соответствуют 400 и 700 соответственно.
Для современных шрифтов важно учитывать доступные веса. Если шрифт поддерживает только нормальный и жирный варианты, указание font-weight: 500; не изменит визуально текст. Оптимальная практика – использовать веса, которые предоставлены в шрифтовом файле, чтобы избежать подмены браузером.
С помощью font-weight можно создавать акценты без изменения размера шрифта. Например, font-weight: 600; на заголовках улучшает читаемость, а font-weight: 300; для вспомогательного текста снижает визуальный шум. Комбинация веса и вариативных шрифтов (variable fonts) позволяет плавно изменять толщину букв, что особенно полезно в адаптивных интерфейсах.
Важно тестировать жирность на разных устройствах и браузерах. На старых системах некоторые промежуточные значения могут не отображаться корректно. Рекомендуется устанавливать fallback-значения и проверять, чтобы визуальная иерархия текста оставалась понятной даже при ограниченных шрифтовых весах.
Использование свойства font-weight для стандартных значений
Свойство font-weight управляет толщиной шрифта. Для большинства шрифтов доступны стандартные ключевые значения: normal, bold, bolder и lighter.
normal соответствует весу шрифта по умолчанию, обычно равному 400. Этот вариант оптимален для основного текста, где важна читаемость и равномерная плотность символов.
bold задаёт вес около 700. Используется для заголовков, выделений и кнопок, где необходимо привлечь внимание без изменения размера шрифта.
bolder увеличивает жирность относительно родительского элемента. Если родитель имеет normal, элемент станет bold. Если родитель уже bold, эффект может быть минимальным, в зависимости от поддерживаемого веса шрифта.
lighter уменьшает жирность относительно родительского элемента. Для текста внутри bold он может перейти к normal. Если родитель normal, визуальная разница зависит от наличия более тонких вариаций шрифта.
При использовании этих значений важно учитывать поддержку шрифтов: не все шрифты корректно отображают промежуточные веса. В таких случаях браузер округляет к ближайшему доступному весу. Для точного контроля можно применять числовые значения от 100 до 900.
Рекомендуется использовать стандартные ключевые значения для текстов, где важна совместимость и предсказуемость отображения на разных устройствах и браузерах.
Задание числовой жирности текста от 100 до 900
В CSS свойство font-weight позволяет задавать числовую жирность текста. Значения варьируются от 100 до 900 с шагом 100. Каждое значение соответствует определённой толщине шрифта: 100 – ультралёгкий, 200 – очень лёгкий, 300 – лёгкий, 400 – нормальный, 500 – средний, 600 – полужирный, 700 – жирный, 800 – очень жирный, 900 – экстремально жирный.
Для корректного отображения необходимо учитывать поддержку выбранного шрифта. Не все шрифты содержат все девять уровней толщины. Если задано значение, отсутствующее в шрифте, браузер автоматически подбирает ближайший доступный вес.
Пример применения:
p { font-weight: 300; } – текст будет лёгким.
h1 { font-weight: 700; } – заголовок станет жирным.
Числовые значения удобны при динамическом управлении стилями, особенно в сочетании с переменными CSS:
:root { --weight-bold: 700; }
strong { font-weight: var(--weight-bold); }
Использование диапазона 100–900 позволяет тонко регулировать визуальный акцент текста и улучшает читаемость при работе с крупными блоками контента или сложными типографическими макетами.
Применение жирности к отдельным элементам и тегам
Для изменения жирности конкретного текста в CSS используется свойство font-weight. Оно позволяет назначать веса как стандартным тегам, так и отдельным элементам на странице.
Основные значения свойства font-weight:
normal– стандартная жирность (обычно 400).bold– полужирный текст (обычно 700).- Цифровые значения от
100до900с шагом 100, где100– самая лёгкая,900– самая тяжёлая.
Применение к отдельным тегам:
h1, h2, h3– заголовки обычно используют жирность 700 или выше для визуальной иерархии.p– основной текст чаще всего имеетnormalили 400.span– подходит для выделения слов или фраз внутри абзацев.strong– по умолчанию эквивалентfont-weight: bold, можно уточнять числовым значением.
Пример назначения жирности отдельному элементу:
p.important {
font-weight: 600;
}Для изменения жирности конкретного слова в тексте используется тег span с классом или идентификатором:
Это важное слово..highlight {
font-weight: 700;
}При работе с цифровыми значениями важно учитывать поддержку шрифтов. Не все шрифты содержат полный диапазон весов, поэтому для гарантированного отображения лучше проверять доступные веса через @font-face или документацию веб-шрифта.
Для комбинирования жирности с другими свойствами, такими как font-style или text-transform, рекомендуется использовать конкретные классы на отдельных элементах вместо глобальных селекторов, чтобы сохранялась точная визуальная структура текста.
Особенности жирности для шрифтов с ограниченным набором вариантов
Некоторые шрифты содержат только базовые веса: обычно normal (400) и bold (700). Применение промежуточных значений через свойство font-weight не приводит к появлению полутонов – браузер выбирает ближайший доступный вариант. Например, для font-weight: 500 шрифт с вариантами 400 и 700 будет отображаться как 400.
Для системных шрифтов ограничения также распространяются на отрицательные значения наклона или веса, которые могут игнорироваться браузером. В CSS рекомендуется использовать точные значения, совпадающие с доступными весами, чтобы избежать непредсказуемого рендеринга.
При работе с веб-шрифтами можно проверить доступные веса через спецификацию шрифта в CSS или документацию поставщика. Если нужны промежуточные значения, допустимо применять трансформацию через text-shadow или font-synthesis, но это увеличивает нагрузку на рендеринг и не всегда сохраняет чёткость линий.
Для шрифтов с ограниченными весами рекомендуется использовать контраст между обычным и жирным текстом, избегая попыток имитировать полужирный стиль. В случае, если дизайн требует более точной градации, стоит рассмотреть подключение расширенной версии шрифта с поддержкой 100–900 или использование переменных шрифтов (font-variation-settings), где доступен плавный диапазон веса.
Проверка отображения на разных платформах обязательна: некоторые операционные системы могут автоматически сглаживать веса, что изменяет визуальное восприятие. Для консистентного результата фиксируйте конкретные доступные значения и избегайте полумеры, если шрифт их не поддерживает.
Комбинирование font-weight с другими текстовыми стилями
Свойство font-weight позволяет задавать толщину шрифта числовыми значениями от 100 до 900 или ключевыми словами normal и bold. Для достижения выразительности текста часто используют комбинацию с font-style, text-transform и letter-spacing.
При работе с font-style: italic тонкие шрифты (100–300) могут терять читаемость, особенно на экранах с низким разрешением. Рекомендуется использовать для курсива веса от 400 и выше. Жирные курсива (700+) создают эффект выделения, но перегруженный текст лучше избегать.
text-transform совместно с font-weight влияет на восприятие заголовков. Пример: text-transform: uppercase; font-weight: 600; делает текст заметным, но при сочетании с 900–bold буквы могут визуально сливаться. Для акцентных элементов лучше использовать 500–700.
letter-spacing корректирует плотность текста. При жирных шрифтах (700–900) увеличение интервала на 0.5–1px улучшает читаемость, особенно в блоках с крупными заголовками. Для тонких весов интервал можно уменьшать до -0.5px, чтобы сохранить визуальную компактность.
Комбинация font-weight с line-height также критична: жирные тексты требуют большего межстрочного интервала (1.4–1.6), тонкие – стандартного (1.2–1.4). В списках и цитатах несбалансированное сочетание веса и высоты строки ухудшает восприятие.
Практическая рекомендация: использовать максимум три уровня font-weight на странице, сочетая их с курсивом и капсом, корректируя letter-spacing и line-height. Это обеспечивает контраст, не перегружая дизайн. Тестировать на разных устройствах обязательно, чтобы тонкие и жирные комбинации оставались читаемыми.
Отладка и проверка отображения жирного текста в браузерах
Для точной проверки жирности текста используйте инструменты разработчика в современных браузерах (Chrome DevTools, Firefox Inspector, Edge DevTools). В панели «Styles» убедитесь, что свойство font-weight применено к нужному элементу и не переопределяется другими правилами CSS.
Разные шрифты поддерживают ограниченный диапазон значений жирности. Например, шрифт Roboto корректно отображает веса 100–900 с шагом 100, тогда как Arial фактически различает только обычный (400) и жирный (700). Проверяйте наличие соответствующих файлов шрифтов и их корректную загрузку через @font-face.
Для диагностики используйте таблицу соответствия значений font-weight и визуального результата:
| CSS значение | Проверка на Arial | Проверка на Roboto |
|---|---|---|
| 100 | практически неотличимо от normal | очень тонкий |
| 400 | normal | normal |
| 500 | почти normal | medium |
| 700 | bold | bold |
| 900 | практически bold | черный (black) |
Для кроссбраузерной проверки используйте сочетание системных и веб-шрифтов. Chrome и Firefox рендерят жирность с небольшими различиями из-за алгоритмов сглаживания. Чтобы зафиксировать визуальный результат, можно временно добавлять рамку вокруг текста и сравнивать толщину линий в разных браузерах.
При динамическом изменении жирности через JavaScript проверяйте значение getComputedStyle(element).fontWeight, чтобы убедиться, что стиль действительно применился и браузер его интерпретирует корректно.
В сложных случаях используйте инструмент для замеров толщины букв (например, Pixel Ruler или Web Developer Extension) для точной оценки визуальной жирности и устранения несоответствий между браузерами.
Вопрос-ответ:
Какие значения можно использовать для свойства font-weight в CSS?
Свойство font-weight позволяет задавать толщину текста. Основные значения — числовые от 100 до 900 с шагом 100, где 400 соответствует обычной толщине, а 700 — полужирной. Также можно использовать ключевые слова normal (равно 400) и bold (равно 700). Некоторые шрифты поддерживают только часть этих значений, поэтому визуальный результат может отличаться.
Как сделать текст полужирным только на заголовках, не затрагивая остальной текст?
Можно использовать селекторы CSS для конкретных элементов. Например, чтобы сделать полужирными все заголовки h1, h2 и h3, пишут: h1, h2, h3 { font-weight: 700; }. Остальные элементы останутся с обычной толщиной. Такой подход помогает управлять стилем текста без необходимости добавлять классы ко всем заголовкам вручную.
Почему текст не становится жирным, если я указываю font-weight: bold?
Чаще всего это связано с тем, что используемый шрифт не поддерживает полужирное начертание. Некоторые веб-шрифты имеют только одно значение толщины. В таких случаях браузер не может отобразить жирный текст. Решением может быть подключение шрифта с нужными весами или использование числового значения font-weight, если шрифт его поддерживает.
Можно ли сделать часть слова или фразы жирной с помощью CSS?
Да, это возможно с помощью тега <span> или других инлайн-обёрток. Например: <span style="font-weight: 700">важное</span> сделает только выделенное слово жирным. Такой метод позволяет менять толщину текста локально, не влияя на весь блок или абзац.
Влияет ли font-weight на производительность страницы?
Свойство font-weight само по себе незначительно нагружает браузер. Основное влияние может оказывать количество подключаемых шрифтов и их весов: если подключено много вариантов толщины одного шрифта, это увеличивает размер файлов и время загрузки. Чтобы минимизировать нагрузку, стоит подключать только те варианты, которые реально используются на сайте.
Какие значения может принимать свойство font-weight в CSS и чем они отличаются?
Свойство font-weight позволяет изменять толщину шрифта в тексте. Оно может принимать числовые значения от 100 до 900 с шагом 100, где 400 обычно соответствует нормальному тексту, а 700 — полужирному. Также существуют ключевые слова: normal (аналог 400) и bold (аналог 700). Более высокие значения создают более жирный текст, а меньшие — тонкий. При выборе конкретного значения важно учитывать поддержку шрифтов, так как не все шрифты корректно отображают все уровни толщины.
Загрузка...
