Размер шрифта в CSS
HTML&CSS

Размер шрифта в CSS

Оригинал: CSS font sizing, Ire Aderinokun

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

Знакомство с единицами измерения

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

Абсолютные единицы фиксированы и (в основном) относятся к какому-то физическому измерению. Когда они объявлены, их размер не может быть изменен путем изменения размера шрифта какого-либо другого элемента.

Относительные единицы не имеют объективного измерения. Вместо этого, их фактический размер определяется размером родительского элемента. Это означает, что их размер может быть изменен путем изменения размеров родительского элемента.

Вот краткое описание некоторых единиц измерения:

Единица измеренияТипОписание
pxАбсолютная1 пиксель
ptАбсолютная1 point равен 1/72 дюйма
pcАбсолютная1 pica равна 12 points
%ОтносительнаяОпределяется относительно размера шрифта родительского элемента
emОтносительнаяОпределяется относительно размера шрифта родительского элемента
remОтносительная(root em) Определяется относительно размера шрифта элемента html
keywordОтносительнаяxx-small, x-small, small, medium, large, x-large, xx-large
vwОтносительная1/100 ширины области просмотра
vhОтносительная1/100 высоты области просмотра
vminОтносительная1/100 меньшего из измерений области просмотра (высоты или ширины)
vmaxОтносительная1/100 большего из измерений области просмотра (высоты или ширины)

Вы можете посмотреть полный список единиц измерения здесь , но я остановлюсь на наиболее актуальных — px, pt, %, em, rem и vw.

В чем разница?

Разница между этими единицами измерения может быть сложна для понимания, поэтому лучше всего продемонстрировать ее на примерах.

Пример 1 — настройки по умолчанию

В чистом HTML документе, без каких-либо настроек размера шрифта, используются настройки по умолчанию. В большинстве браузеров, размер шрифта по умолчанию у элементов html и body равен 100%. Это эквивалентно следующему:

100% = 1em = 1rem = 16px = 12pt

Это означает, что если вы зададите одному элементу <p> размер шрифта равный 100%, а другому — 16px, они будут выглядеть на экране одинаково. Это показано на рисунке ниже:

Пример 2 — абсолютные и относительные единицы измерения

Разница между абсолютными и относительными единицами измерения может быть продемонстрирована с помощью изменения размера шрифта элемента html. Если мы установим html { font-size: 200% }, это повлияет только на те элементы <p>, для которых размер шрифта задан в относительных единицах.

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

Пример 3 — rem vs em (и %)

Размер шрифта в em (и в %) рассчитывается относительно размера шрифта родительского элемента. Например:


html { 
    font-size: 100% /* =16px */
}
body {
    font-size: 2em; /* =32px */
}
p {
    font-size: 1em; /* =32px */
    /* font-size: 0.5em; =16px */
}

Поскольку размер шрифта элемента p наследуется от body, а body от html, размер шрифта p оказывается в два раза больше, чем мы могли ожидать.

При использовании единицы измерения em, вы должны принимать во внимание размер шрифта всех родительских элементов. Как вы можете видеть, это может довольно быстро стать сложным.

Решением этой проблемы является rem. Единица измерения rem рассчитывается только на основе размера шрифта элемента html, а не родительского элемента. Например:


html { 
    font-size: 100% /* =16px */
}
body {
    font-size: 2rem; /* =32px */
}
p {
    font-size: 1rem; /* =16px */
}

Использование rem позволяет вам использовать такие же возможности масштабирования, как с em и %, но без проблем с вложенностью.

Пример 4 — единицы измерения на основе ширины области просмотра

Единица измерения vw, новая единица измерения CSS3 , рассчитывается на основе ширины области просмотра. Это позволяет задавать размер шрифта более отзывчиво.

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

Мой способ

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

Тем не менее, я нахожу этот метод довольно ограниченным в плане способности к масштабированию. Хотя мои размеры шрифтов выглядят хорошо на средних и малых экранах, их можно оптимизировать для более крупных. Даже если пользователи имеют возможность увеличить размер шрифта, это не то, что они должны делать.

Мой способ заключается в использовании rem (и пикселей в качестве запасного решения).


html {
    font-size: 62.5%; /* sets the base font to 10px for easier math */
}

body {
    font-size: 16px;
    font-size: 1.6rem;  
    /* sets the default sizing to make sure nothing is actually 10px */
}

h1 {
    font-size: 32px;
    font-size: 3.2rem;
}

Это позволяет мне масштабировать размер шрифта, просто написав:


@media screen and (min-width: 1280px) {
    html {
        font-size: 100%;
    }
}

Этот метод использует пиксели в качестве запасной единицы измерения, поскольку rem не поддерживается IE8 и ниже. Проблема такого решения заключается в том, что масштабирование с помощью изменения размера шрифта родительского элемента не затрагивает запасной размер. Тем не менее, я не считаю, что это огромная проблема, потому что возможность масштабирования для больших устройств является скорее дополнительной функцией.

Если у вас есть какие-либо идеи о том, как я могу улучшить этот способ, дайте мне знать. Я хочу также написать SCSS миксин для того, чтобы не приходилось каждый раз писать размер шрифта и в пикселях, и в rem.

Рассылка
Подпишитесь на рассылку и получайте дайджест новостей и статей.
Никакого спама!
Подписаться