Перейти к содержанию

Энциклопедия CSS: font-weight

Материал из Викижурнал
CSS: color
Энциклопедия CSS: font-weight
Энциклопедия CSS: font-weight
Тематические порталы
Портал CSS • Портал Веб-разработчиков

Свойство font-weight в CSS задаёт толщину шрифта текста элемента. Оно используется для стилизации текста, подчёркивания его важности и создания визуальной иерархии на странице.

Синтаксис

Свойство font-weight принимает следующие значения: 

font-weight: значение;

Допустимые значения

Свойство поддерживает как предопределённые ключевые слова, так и числовые значения.

Ключевые слова

  • normal: Нормальная толщина текста (по умолчанию).
  • bold: Жирный текст.
  • bolder: Более толстый шрифт, чем у родительского элемента.
  • lighter: Более тонкий шрифт, чем у родительского элемента.

Числовые значения

Можно использовать числовые значения от 100 до 900 с шагом 100. Эти значения соответствуют различным степеням толщины текста:

  • 100: Очень тонкий.
  • 200: Тонкий.
  • 300: Менее обычного.
  • 400: Обычный (эквивалент normal).
  • 500: Чуть толще обычного.
  • 600, 700: Жирный (эквивалент bold).
  • 800: Очень жирный.
  • 900: Максимально жирный.

Важно отметить, что поддержка промежуточных значений (например, 500, 600) зависит от используемого шрифта.

Пример использования

HTML

<body>
    <p class="normal">Текст с нормальной толщиной.</p>
    <p class="bold">Текст с жирным шрифтом.</p>
    <p class="lighter">Текст с тонким шрифтом.</p>
    <p class="custom-weight">Текст с пользовательской толщиной (600).</p>
</body>

CSS

p {
    font-size: 16px;
    font-family: Arial, sans-serif;
    line-height: 1.5;
}

.normal {
    font-weight: normal; /* Нормальный шрифт */
}

.bold {
    font-weight: bold; /* Жирный шрифт */
}

.lighter {
    font-weight: lighter; /* Тонкий шрифт */
}

.custom-weight {
    font-weight: 600; /* Пользовательская толщина */
}

Пример с использованием медиа-запросов

С помощью font-weight можно динамически изменять толщину текста в зависимости от размера экрана: 

body {
    font-weight: 400; /* Нормальный текст */
}

@media (max-width: 600px) {
    body {
        font-weight: 300; /* Тонкий текст для мобильных устройств */
    }
}

Поддержка браузерами

Свойство font-weight поддерживается всеми современными браузерами. Однако корректная работа с числовыми значениями (например, 500, 600) зависит от используемого шрифта. Некоторые шрифты поддерживают только ключевые значения normal и bold.

Полезные советы

  • Используйте числовые значения, чтобы получить больше контроля над толщиной текста, если шрифт это поддерживает.
  • Убедитесь, что выбранный шрифт включает необходимые толщины. Например, многие веб-шрифты (Google Fonts) позволяют загрузить только нужные вариации толщины для оптимизации загрузки страницы.
  • Не используйте слишком тонкие (100) или слишком жирные (900) шрифты для основного текста, так как это может снизить читаемость.

Заключение

Свойство font-weight является важным инструментом для управления толщиной шрифта. Оно позволяет настроить текст так, чтобы он соответствовал требованиям дизайна и был удобен для чтения.

Другие статьи о CSS

Источник — https://ru.wikijournal.org/w-wiki/index.php?title=Энциклопедия_CSS:_font-weight&oldid=13164