Главная страница » CSS » 13. Насыщенность шрифта

13. Насыщенность шрифта

Насыщенность шрифта (или жирность) в CSS управляет толщиной символов текста, что может влиять на визуальную иерархию и читабельность. Это свойство позволяет выделить важные части текста, улучшить читаемость или создать стильный вид для различных элементов на веб-странице.

Свойство `font-weight`

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

Предопределённые значения

normal — нормальная насыщенность шрифта, обычно равна 400.
bold — жирное начертание шрифта, обычно равное 700.
bolder — более жирное начертание по сравнению с родительским элементом.
lighter — менее жирное начертание по сравнению с родительским элементом.

				
					.normal-text {
    font-weight: normal; /* Нормальная насыщенность шрифта */
}
.bold-text {
    font-weight: bold; /* Жирное начертание шрифта */
}

Числовые значения
- Значения от 100 до 900, где 100 — наименьшая насыщенность, а 900 — наибольшая. Значение по умолчанию, если не указано, часто равно 400 (нормальное начертание), а 700 — жирное начертание.

				
					.light-text {
    font-weight: 300; /* Лёгкое начертание шрифта */
}
.regular-text {
    font-weight: 400; /* Нормальная насыщенность шрифта */
}
.heavy-text {
    font-weight: 700; /* Жирное начертание шрифта */
}
.extra-heavy-text {
    font-weight: 900; /* Очень жирное начертание шрифта */
}

Пример:

				
					<!DOCTYPE html>
<html>
<head>
    <style>
        .light-text {
            font-weight: 300; /* Лёгкое начертание */
        }
        .regular-text {
            font-weight: 400; /* Нормальная насыщенность */
        }
        .bold-text {
            font-weight: 700; /* Жирное начертание */
        }
        .extra-bold-text {
            font-weight: 900; /* Очень жирное начертание */
        }
    </style>
</head>
<body>
    <p class="light-text">Этот текст имеет лёгкую насыщенность шрифта.</p>
    <p class="regular-text">Этот текст имеет нормальную насыщенность шрифта.</p>
    <p class="bold-text">Этот текст имеет жирное начертание шрифта.</p>
    <p class="extra-bold-text">Этот текст имеет очень жирное начертание шрифта.</p>
</body>
</html>

Ключевые слова для шрифтов с поддержкой вариаций
Некоторые шрифты поддерживают дополнительные вариации насыщенности, такие как extra-light, semi-bold, и другие, которые могут быть использованы для более точного управления.

				
					.extra-light-text {
    font-weight: 200; /* Очень лёгкое начертание шрифта */
}
.semi-bold-text {
    font-weight: 600; /* Полужирное начертание шрифта */
}

Пример:

				
					<!DOCTYPE html>
<html>
<head>
    <style>
        .extra-light-text {
            font-weight: 200; /* Очень лёгкое начертание */
        }
        .semi-bold-text {
            font-weight: 600; /* Полужирное начертание */
        }
    </style>
</head>
<body>
    <p class="extra-light-text">Этот текст имеет очень лёгкую насыщенность шрифта.</p>
    <p class="semi-bold-text">Этот текст имеет полужирное начертание шрифта.</p>
</body>
</html>

Влияние на дизайн

Выделение элементов: Жирный шрифт (font-weight: bold) часто используется для выделения заголовков, ссылок или важных частей текста.
Создание контраста: Использование разных уровней насыщенности шрифта помогает создавать контраст и иерархию текста. Например, можно использовать лёгкое начертание для основного текста и жирное начертание для акцентов.
Доступность: Убедитесь, что изменение насыщенности шрифта не снижает читаемость текста. Некоторые пользователи могут иметь проблемы с восприятием текста, если его насыщенность слишком низкая.

Распространённые ошибки

Неравномерное использование: Чрезмерное использование разных значений font-weight может привести к несогласованности в дизайне. Используйте различные уровни насыщенности обдуманно, чтобы улучшить читаемость и визуальную иерархию.
Шрифты без поддержки всех значений: Некоторые шрифты не поддерживают все возможные значения font-weight. Например, если шрифт поддерживает только нормальное и жирное начертание, использование промежуточных значений не даст ожидаемого результата.
Игнорирование контекста: Важно учитывать контекст, в котором используется шрифт. Например, слишком жирный шрифт может затруднить чтение, если текст слишком длинный.

Заключение

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

Тестовое задание

Создайте HTML-документ с элементами <h1>, <h2>, <p>, и <span>.
Примените различные значения font-weight к этим элементам, чтобы создать контраст и визуальную иерархию текста.
Используйте как предопределённые значения, так и числовые значения для font-weight и проверьте, как они влияют на дизайн.

HTML-документ:

				
					<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            font-size: 16px; /* Основной размер шрифта */
        }
        h1 {
            font-weight: 900; /* Очень жирное начертание */
        }
        h2 {
            font-weight: 700; /* Жирное начертание */
        }
        p {
            font-weight: 400; /* Нормальная насыщенность */
        }
        .light-text {
            font-weight: 300; /* Лёгкое начертание */
        }
        .bold-text {
            font-weight: bold; /* Жирное начертание */
        }
        .extra-light-text {
            font-weight: 200; /* Очень лёгкое начертание */
        }
        .semi-bold-text {
            font-weight: 600; /* Полужирное начертание */
        }
    </style>
</head>
<body>
    <h1>Заголовок первого уровня</h1>
    <h2>Заголовок второго уровня</h2>
    <p>Это текст с нормальной насыщенностью шрифта.</p>
    <p class="light-text">Этот текст имеет лёгкую насыщенность шрифта.</p>
    <p class="bold-text">Этот текст имеет жирное начертание шрифта.</p>
    <p class="extra-light-text">Этот текст имеет очень лёгкую насыщенность шрифта.</p>
    <p class="semi-bold-text">Этот текст имеет полужирное начертание шрифта.</p>
</body>
</html>

Выполнив это задание, вы получите практическое понимание того, как использовать насыщенность шрифта для создания визуальной иерархии и улучшения дизайна вашей веб-страницы.