Свойство font-weight отвечает за толщину символов в тексте. Оно поддерживает ключевые значения: normal (обычный), bold (жирный), а также числовые значения от 100 до 900 с шагом 100. Наиболее часто используют 400 для обычного текста и 700 для заголовков.
Жирность влияет на восприятие информации и визуальную иерархию на странице. Для текстов с малой длиной, таких как кнопки или метки, рекомендуют использовать 600–700, чтобы обеспечить читаемость. Для длинных абзацев оптимально оставлять 400–500, чтобы не утомлять глаз.
Поддержка font-weight зависит от выбранного шрифта. Не все веб-шрифты имеют полное число вариантов. Если задано значение, которого нет в шрифте, браузер выберет ближайшее доступное. Проверка доступных начертаний через сервисы вроде Google Fonts позволяет заранее подобрать оптимальные веса.
Для адаптивного дизайна можно использовать медиазапросы и менять font-weight в зависимости от размера экрана. Это улучшает читаемость на мобильных устройствах без увеличения размера шрифта.
Вопрос-ответ:
Как задать жирность текста в CSS?
Для управления толщиной символов используют свойство font-weight. Оно принимает ключевые значения normal (обычный) и bold (жирный), а также числовые значения от 100 до 900 с шагом 100. Например, font-weight: 700; сделает текст жирным.
Можно ли использовать несколько уровней жирности для одного шрифта?
Да, шрифты поддерживают разные значения font-weight, но только те, которые предусмотрены самим шрифтом. Если задать значение, которого нет, браузер выберет ближайшее доступное. Проверить поддерживаемые веса можно на странице шрифта или через CSS-свойство @font-face.
Как влияет жирность на читаемость текста?
Жирность помогает выделять важные элементы и улучшает визуальную иерархию. Для коротких блоков текста, таких как кнопки или заголовки, используют веса 600–700, чтобы символы были заметнее. Для длинных абзацев оптимальны 400–500, чтобы текст оставался удобным для чтения.
Можно ли изменять жирность текста в зависимости от устройства?
Да, с помощью медиазапросов можно изменять font-weight в зависимости от ширины экрана. Например, на мобильных устройствах можно использовать меньший вес для длинных текстов, чтобы улучшить читаемость, а на десктопах увеличить жирность заголовков для визуального акцента.
Все ли шрифты поддерживают числовые значения font-weight?
Нет, не каждый шрифт имеет полный набор весов от 100 до 900. При использовании веб-шрифтов стоит проверять, какие веса доступны. Если задать значение, которого нет, браузер выберет ближайшее доступное, что может немного изменить визуальное оформление текста.
Как правильно использовать свойство font-weight в CSS для разных элементов страницы?
Свойство font-weight задаёт толщину текста и принимает ключевые значения normal и bold, а также числовые значения от 100 до 900. Для заголовков обычно используют значения 600–700, чтобы они выделялись, а для основного текста — 400–500 для удобного чтения. Важно учитывать, что не каждый шрифт поддерживает все числовые веса: если указано недоступное значение, браузер выбирает ближайшее. Для точного контроля можно проверять доступные начертания через страницу шрифта или подключаемые веб-шрифты. Также допустимо изменять жирность с помощью медиазапросов для разных устройств, чтобы улучшить визуальное восприятие на экранах разного размера.