Кроссбраузерный и кроссплатформенный размер шрифта (font-size) в процентах и относительных единицах (em)

∘CSS 14.11.19 14.11.19 388
Бесплатные курсына главную сниппетов

Решаем вопрос установки размера шрифта, обеспечивающем единообразное отображение во всех браузерах

Используем подход %/em — проценты плюс относительные единицы

Очевидно, установку размера шрифта в процентах полностью отвергать нельзя. Это необходимо для того, чтобы учитывать пользовательские установки браузера (если таковые отличаются от дефолтных). Однако далее необходим полный переход на относительные единицы (em). Обычно я поступаю следующим образом:
Устанавливаю font-size для body в 62.5% Поскольку теперь 1em становится равным 10px, далее использую для font-size только относительные значения, например 1.2em Соответствие между em и px определяем по формуле “1em = 10px”
Пример такого решения выглядит гораздо читабельнее:

body      { font-size:62.5%; }
#header   { font-size:.9em; }
#main     { font-size:1.1em; }
Кроме всего прочего, достигается подход pixel-perfect и полная кроссбраузерность в отображении font-size. И клиенты довольны и верстальщики целы.

 

на главную сниппетов
Курсы