Главная страница » CSS » 12. Размер шрифта

12. Размер шрифта

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

Способы задания размера шрифта

Фиксированные единицы

- px (пиксели): Это наиболее распространённая единица измерения для фиксированного размера шрифта. Размер шрифта задается в пикселях и не изменяется в зависимости от других факторов.

				
					p {
    font-size: 16px; /* Размер шрифта 16 пикселей */
}

pt (пункты): Единица измерения, используемая в печати, но также применяемая в веб-дизайне. 1 пункт равен 1/72 дюйма.

				
					p {
    font-size: 12pt; /* Размер шрифта 12 пунктов */
}

Относительные единицы

em: Относительная единица измерения, которая зависит от размера шрифта родительского элемента. Если размер шрифта родителя равен 16px, то 1em будет равен 16px.

				
					p {
    font-size: 1.5em; /* Размер шрифта в 1.5 раза больше размера шрифта родителя */
}

rem: Относительная единица измерения, которая зависит от размера шрифта корневого элемента (<html>). Это удобно для создания масштабируемого дизайна.

				
					p {
    font-size: 1.25rem; /* Размер шрифта в 1.25 раза больше размера шрифта корневого элемента */
}

%: Процентное значение также может использоваться для задания размера шрифта, относительно размера шрифта родительского элемента.

				
					p {
    font-size: 120%; /* Размер шрифта на 20% больше размера шрифта родителя */
}

Встроенные размеры шрифтов

large, small, x-large, xx-large, и т.д.: CSS предоставляет несколько предопределённых значений для размеров шрифта. Эти значения изменяются в зависимости от браузера и настроек пользователя.

				
					h1 {
    font-size: x-large; /* Размер шрифта больше, чем обычный */
}

inherit: Используется для наследования размера шрифта от родительского элемента.

				
					p {
    font-size: initial; /* Устанавливает размер шрифта на значение по умолчанию */
}

unset: Сбрасывает размер шрифта к значению, которое было бы у элемента, если бы никакие другие стили не применялись.

				
					p {
    font-size: unset; /* Сбрасывает размер шрифта к значению по умолчанию или унаследованному значению */
}

Примеры использования размера шрифта

HTML-документ:

				
					<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            font-size: 16px; /* Основной размер шрифта в 16 пикселей */
        }
        h1 {
            font-size: 2rem; /* Размер шрифта в 2 раза больше размера шрифта корневого элемента */
        }
        h2 {
            font-size: 1.5em; /* Размер шрифта в 1.5 раза больше размера шрифта родителя */
        }
        p {
            font-size: 14px; /* Размер шрифта 14 пикселей */
        }
        .large-text {
            font-size: x-large; /* Размер шрифта больше, чем обычный */
        }
        .small-text {
            font-size: small; /* Размер шрифта меньше, чем обычный */
        }
    </style>
</head>
<body>
    <h1>Заголовок первого уровня</h1>
    <h2>Заголовок второго уровня</h2>
    <p>Это обычный текст с размером шрифта 14 пикселей.</p>
    <p class="large-text">Этот текст имеет размер шрифта больше, чем обычный.</p>
    <p class="small-text">Этот текст имеет размер шрифта меньше, чем обычный.</p>
</body>
</html>

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

Неправильное использование em и rem: Если неправильно использовать относительные единицы, это может привести к непредсказуемым результатам. Например, если вы задаете размер шрифта с em на элементе, который уже имеет размер шрифта, то это может создать каскадные эффекты.
Отсутствие единообразия: Использование слишком многих различных единиц измерения может затруднить управление дизайном. Старайтесь использовать один или два типа единиц измерения в проекте.
Игнорирование масштабируемости: Если использовать только фиксированные единицы измерения (например, px), это может затруднить масштабирование текста для пользователей с особыми потребностями. Рассматривайте использование относительных единиц (em, rem) для улучшения доступности.

Заключение

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

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

Создайте HTML-документ с элементами <h1>, <h2>, <p>, <span>, и <button>.
Примените различные способы задания размера шрифта, включая пиксели (px), проценты (%), относительные единицы (em, rem), и предопределённые значения (small, large).
Проверьте, как изменения в размерах шрифтов влияют на макет и читаемость текста на странице.

HTML-документ:

				
					<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            font-size: 16px; /* Основной размер шрифта */
        }
        h1 {
            font-size: 2rem; /* Размер шрифта в 2 раза больше размера шрифта корневого элемента */
        }
        h2 {
            font-size: 1.5em; /* Размер шрифта в 1.5 раза больше размера шрифта родителя */
        }
        p {
            font-size: 14px; /* Размер шрифта 14 пикселей */
        }
        .percentage-text {
            font-size: 120%; /* Размер шрифта на 20% больше размера шрифта родителя */
        }
        .large-text {
            font-size: x-large; /* Размер шрифта больше, чем обычный */
        }
        .small-text {
            font-size: small; /* Размер шрифта меньше, чем обычный */
        }
    </style>
</head>
<body>
    <h1>Заголовок первого уровня</h1>
    <h2>Заголовок второго уровня</h2>
    <p>Это обычный текст с размером шрифта 14 пикселей.</p>
    <p class="percentage-text">Этот текст имеет размер шрифта на 20% больше, чем обычный.</p>
    <p class="large-text">Этот текст имеет размер шрифта больше, чем обычный.</p>
    <p class="small-text">Этот текст имеет размер шрифта меньше, чем обычный.</p>
</body>
</html>

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