Сегодня мы расскажем о уже широко используемых новых относительных единицах измерения шрифтов CSS3. Десятилетие нам приходилось неэффективно использовать недостаточные ключевые слова, такие как small (маленький), medium (средний), large (большой) и т. п. и несовершенными единицами фиксированного размера, такими как px, pt, mm и т. п. Не смотря на то, что проблемы с единицей измерения px в браузере Internet Explorer закончились, единицы измерения % и em оставались наилучшим выбором, особенно для адаптивной верстки. 

К счастью, в CSS3 есть несколько новых единиц измерения.

Единицы измерения rem 

Одна из сложностей с единицами измерения % и em заключается в проблеме с вложенными многокомпонентными структурами. Например:

<style>
body  { font-size: 100%; }
p, li { font-size: 0.75em; }
</style>

<p> 12px text </p>
<ul>
<li> 12px text
<ul><li> 9px text </li></ul>
</li>
</ul> 

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

Единицы измерения rem похожи на единицы измерения em, но их размер задается относительно размера корневого элемента, а не родительского. Изменив размер шрифта у списка на 0,75rem, мы добьемся сохранения размера шрифта 12px во всех вложенных списках.

Единицы измерения rem поддерживаются современными версиями браузеров Chrome, Firefox, Safari, Opera и браузером Internet Explorer от версии 9. Старым версиям браузеров понадобится обходной путь, и, вероятно, его будет легче задать с помощью абсолютных единиц измерения, например, так:

p, li
{
  font-size: 12px;
  font-size: 0.75rem;
}

Единицы измерения vw, vh и vmin 

Эти новые свойства позволяют изменять размер шрифтов в соответствии с измерениями устройства отображения, т. е.:

• 1vw — 1% ширины устройства отображения.
• 1vh -  1% высоты устройства отображения.
• 1vmin — наименьшее значение из 1vw и 1vh.

Например, предположим, что размер устройства отображения Вашего браузера установлен как 1,000 на 1,200 пикселей, тогда:

• 1.5vw = размер шрифта 15px
• 1.5vh = размер шрифта 18px
• 1.5vmin = минимальное значение из 1.5vw и 1.5vh = размер шрифта 15px

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

С поддержкой браузеров пока есть сложности, но, надеемся, вскоре все проблемы разрешатся:

• Браузер Internet Explorer версии 10 — полностью поддерживается
• Браузер Internet Explorer версии 9 — поддерживается, но единицы измерения vmin называются “vm”.
• Браузер Chrome от версии 22 — полностью поддерживается.
• Браузеры Safari версии 6 и iOS Safari версии 6 — полностью поддерживается.
• Браузер iOS Safari версии 7 — частично поддерживается, есть некоторые сбои, почитайте об обходном пути.
• Браузер Firefox от версии 19 — полностью поддерживается.
• Браузер Opera от версии 15 — полностью поддерживается.
• Браузер Blackberry от версии 10 — полностью поддерживается.
• Браузер Android от версии 4.4 — полностью поддерживается.
• Браузер Chrome для устройств с операционной системой Android от версии 40 — полностью поддерживается.
• Браузер Firefox для устройств с операционной системой Android от версии 33 — полностью поддерживается.
• Браузер UC для устройств с операционной системой Android — не поддерживается.
• Браузер Internet Explorer Mobile от версии 10 — полностью поддерживается.
• Браузер Opera Mini  — не поддерживается.
• Браузер Opera Mobile — пока не поддерживается, но поддержка обещана от версии 24.

Опять же пока что можно порекомендовать некоторое время использовать обходной путь:

p, li
{
  font-size: 12px;    /* old */
  font-size: 1.2vm;   /* IE9 */
  font-size: 1.2vmin;
}

Надеемся, вам пригодятся новые единицы измерения шрифтов.

Автор урока Craig Buckler

Перевод — Дежурка

Смотрите также:

• Обзор единиц измерения CSS3 и их использования
• Использование псевдокласса CSS :nth-child
• Использование свойства CSS3 @font-face