Статья написана в далеком 2011 году одним товарищем по имени Jonathan Snook.
Статейка мне понравилась и пришлась в пору - мне как раз нужно было ознакомиться с вопросом масштабируемого размера шрифта и возможности единообразного задания его размера для всего документа.
Материальчик понравился и я решил, что я лучше не смогу его написать, чем как просто перевести. Вопрос хорошо освещен - кратко и по делу, с необходимыми примерами.
Думаю, в следующих своих верстках я буду применять именно тот подход, который описан здесь. Ниже - мой вольный перевод.
Размер шрифта в rem
Определение единиц измерения текста всегда было темой горячих споров, даже в наши дни. К сожалению, на сегодняшний день все еще существуют многочисленные “за” и “против” для каждого из методов определения универсальной единицы измерения шрифта. Вопрос заключается в том, чтобы выбрать наиболее приемлемую из всех приемлемых.
Наиболее популярны два метода определения размера шрифта:
- размер шрифта в пикселях
1
px
- размер шрифта в
1
em
Давайте сделаем краткий обзор обоих методов, прежде чем я представлю еще один - волшебный третий способ.
Размер шрифта в 1
px
1 | px |
С самого первого дня, когда зародился Интернет, мы (веб-мастера) использовали пиксели для задания размеров текста. Это надежный и понятный способ.
К сожалению, пользователи Internet Explorer - даже IE9 - не имеют возможности изменять размер текста, используя для этого встроенную функцию браузера.
Для веб-мастеров, которые озабочены такой возможностью, это большая проблема. Последние свежие версии браузера IE имеют встроенную функцию масштабирования, которая увеличивает размер ВСЕГО на странице - эта возможность присутствует во всех остальных браузерах, поддерживающих веб-стандарты. Это несколько сглаживает недостатки браузеров и данного метода, в частности.
Исходя из своего личного опыта, могу сказать, что использование пикселей предоставляет для меня надежную структуру будущего сайта. Пользователи браузеров имеют достаточно средств, чтобы подстроить сайт под свои предпочтения. Но я отвлекся от темы. Что еще у нас есть в наличии?
Размер шрифта в 1
em
1 | em |
Невозможность изменения размеров текста в браузере IE постоянно вызывало чувство разочарования у веб-разработчиков. Чтобы обойти эту проблему, можно использовать единицы измерения 1
em
Впервые об этом способе написал в далеком 2004-м году Richard Rutter в своей статье How to size text using ems.
Этот способ основан на задании основного размера шрифта для 1
body
1
1em
1
10px
1
16px
Теперь, чтобы установить размер шрифта для элемента страницы в единицах, эквивалентных 1
14px
1
1.4em
body { font-size: 62.5%; }
h1 { font-size: 2.4em; } /* =24px */
p { font-size: 1.4em; } /* =14px */
li { font-size: 1.4em; } /* =14px? */Проблема с размерами шрифта в 1
em
1
li
Если добавить еще один вложенный уровень, то размер шрифта будет 27px! Происходит это вследствие наследования свойств в CSS-таблицах.
Чтобы избежать такого эффекта, нужно явно прописать для каждого дочернего элемента размер шрифта в 1em:
body { font-size:62.5%; }
h1 { font-size: 2.4em; } /* =24px */
p { font-size: 1.4em; } /* =14px */
li { font-size: 1.4em; } /* =14px? */
li li, li p /* etc */ { font-size: 1em; }Проблема наследования при системе задания размеров шрифта в em достаточно неудобна. Что же можно еще предложить для решения проблемы?
Размер шрифта в 1
rem
1 | rem |
Стандарт CSS3 вводит в обиход несколько новых единиц измерения, одной из которых является 1
rem
Единица измерения 1
em
1
rem
Это означает, что можно установить размер шрифта только один раз, для элемента html. Для всех остальных элементов, которые являются потомками этого элемента, достаточно установить размер шрифта в процентах (1
rem
html { font-size: 62.5%; }
body { font-size: 1.4rem; } /* =14px */
h1 { font-size: 2.4rem; } /* =24px */В примере, показанном выше, базовый размер шрифта установлен в процентах 1
62,5%
1
em
1
rem
1
em
Но как насчет скудной поддержки этой единицы измерения в браузерах?
Вы будете сильно удивлены, но поддержка 1
rem
1
rem
1
rem
Как же нам поступить с браузерами, которые не поддерживают единицы измерения 1
rem
1
fallback
1
px
1
px
1
rem
html { font-size: 62.5%; }
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1 { font-size: 24px; font-size: 2.4rem; } /* =24px */И пожалуйста, теперь мы имеем прочную и предсказуемую структуру во всех браузерах.
Декабрь 13 2011 - Opera 11.60 теперь поддерживает единицы измерения 1
rem
Конец статьи и перевода. В дополнение я могу сказать, что на сайте CSS Tricks также есть интересный материал по поводу 1
rem
В частности, на нем приведены удобные 1
mixin
1
rem
1
fallback
1
px
html{
font-size: 62,5%;
}
@mixin font-size($sizeValue: 1.6) {
font-size: ($sizeValue * 10) + px;
font-size: $sizeValue + rem;
}Пример использования этого SASS-mixin’а:
p{
@include font-size(1.8);
}… что при компиляции в CSS будет выглядеть следующим образом:
p{
font-size: 18px;
font-size: 1.8rem;
}И еще несколько разновидностей SASS-mixin’ов, которые могут пригодиться. Подмешивания используются для задания размера шрифта и интерлиньяжа (высоты строки):
@mixin fontSize($sizeValue: 12 ){
font-size: $sizeValue + px; //fallback for old browsers
font-size: (0.125 * $sizeValue) + rem;
}
/* Как подключать
--------------------*/
p{
@mixin fontSize(20);
}
/* Результат компиляции в CSS
-------------------------------*/
p{
font-size: 20px;
font-size: 2.5rem;
}@mixin lineHeight($heightValue: 12 ){
line-height: $heightValue + px; //fallback for old browsers
line-height: (0.125 * $heightValue) + rem;
}
/* Как подключить
-------------------*/
p{
@mixin lineHeight(18);
}
/* Результат компиляции в CSS
--------------------------------*/
p{
line-height: 18px;
line-height: 2.25rem;
}А здесь представлен “полный” 1
mixin
1
line-height
1
rem
@mixin fontsize($size:1.6, $line: $size * 1.5){
font-size: ($size * 10) + px;
line-height: ($line * 10) + px;
font-size: $size + rem;
line-height: $line + rem;
}
/* Как подключить
-------------------*/
p{
@mixin fontsize(1.8);
}
/* Результат компиляции в CSS
-------------------------------*/
p{
font-size: 18px;
line-height: 27px;
font-size: 1.8rem;
line-height: 2.7rem;
}P.S.
Постепенно изучаю вопрос создания тем под WordPress. Скачал версию 3.7.1, установил под локальный сервер XAMPP и открыл файл 1
style.css
/* =Notes
--------------------------------------------------------------
This stylesheet uses rem values with a pixel fallback. The rem
values (and line heights) are calculated using two variables:
$rembase: 14;
$line-height: 24;
---------- Examples
* Use a pixel value with a rem fallback for font-size, padding, margins, etc.
padding: 5px 0;
padding: 0.357142857rem 0; (5 / $rembase)
* Set a font-size and then set a line-height based on the font-size
font-size: 16px
font-size: 1.142857143rem; (16 / $rembase)
line-height: 1.5; ($line-height / 16)
---------- Vertical spacing
Vertical spacing between most elements should use 24px or 48px
to maintain vertical rhythm:
.my-new-div {
margin: 24px 0;
margin: 1.714285714rem 0; ( 24 / $rembase )
}
---------- Further reading
http://snook.ca/archives/html_and_css/font-size-with-rem
http://blog.typekit.com/2011/11/09/type-study-sizing-the-legible-letter/То есть, что нам сообщают разработчики WordPress в этих строках? Что данный файл стилевых правил использует для построения дизайна сайта два значения в качестве переменных:
$rembase: 14;
$line-height: 24;… в единицах измерения 1
rem
1
fallback
1
px
В самом конце две ссылки по тематике 1
rem
