CSS font-size: единицы измерения

understanding-property-font-size-CSS-px-vs-em-rem

Один из наиболее распространенных вопросов CSS это единицы измерения шрифта. Разработчик может указать их в px, %, em, pt и rem. Давайте рассмотрим их по отдельности.

px

Самый популярный способ указывать размер шрифта, но имеет ряд недостатков. В частности раньше, когда браузеры не поддерживали функции zoom, менять размер шрифта можно было только в настройках браузера. Причем если он был задан в пикселях, то поменять его в IE <=9 было невозможно. Поэтому стали использовать % и em. Сейчас все современные браузеры поддерживают функцию zoom, которая увеличивает размеры всех элементов страницы в том числе и шрифта.

%

Считается, что текущий размер шрифта равен 100%. Мы можем изменять шрифт дочерних элементов указывая им значения в процентах от родительского (например font-size:50% — уменьшит шрифт вдвое.) Используя проценты, вы делаете свой шрифт максимально масштабируемым для мобильных устройств.

em

Единицы измерения em так же как и % помогают масштабировать ваш текст. Текущий размер шрифта равен 1em. Т.е. если размер шрифта равен 14px, то 1em=14px или 0.5em = 7px.

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

[codesyntax lang=»css»]

body { font-size:62.5%; }
h1 { font-size: 2.4em; } /* =24px */
p  { font-size: 1.4em; } /* =14px */
li { font-size: 1.4em; } /* =14px? */

[/codesyntax]

 

Дело в том, что по умолчанию размер шрифта равен 16px. А 62,5% переопределяют его в 10px, что в свою очередь равно 1em.

pt

Единицы измерения pt традиционно использовались в печатных медиа. Они схожи с пикселями и так же не могут масштабироваться. 1pt = 1/72 дюйма.

rem

В CSS3 появились новые единицы измерения — rem (от англ. root em). Rem схожи с em. Только em определяются относительно родительского элемента, а rem — относительно корневого (html). На момент написания статьи их поддерживают все современные браузеры.

Кратко зависимость между этими единицами можно выразить так:

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

 

Запись опубликована в рубрике HTML/CSS с метками , . Добавьте в закладки постоянную ссылку.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *