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

14.11.19 21:22:04 14.11.19 21:23:35 94

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

Используем подход %/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. И клиенты довольны и верстальщики целы.

*Источник http://www.seditio.by/blog/html_and_css/accessible-cross-browser-pixel-perfect-font-size