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

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

Кроссбраузерный размер шрифта в em

При создании веб сайта всегда приходится использовать динамическую размерность шрифтов. Самым простым способом является использование процентов. Такое решение позволяет достичь несколько целей:

  1. Обеспечить простое изменение размеров шрифта для любого элемента
  2. Обеспечить адаптацию размера шрифта под пользовательские установки браузера

Однако опыт разработки веб-проектов показывает, что чистое использование процентов нередко приводит к весьма запутанным ситуациям. Кроме того, при этом не всегда обеспечивается подход pixel-perfect к HTML верстке.

Поясню ситуацию на простом примере:

body      { font-size:75%; }
#header   { font-size:90%; }
#header p { font-size:95%; }
#main     { font-size:100%; }
#main p   { /* какую величину указать для одинакового размера с header p? */ }

При командной работе ситуация может серьезно усугубиться: разработчики могут легко запутать друг друга, используя собственные процентные значения. Свою "лепту" внесут и браузеры с разными расчетами шрифтовых размеров и, соответственно, разным их отображением.

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

Очевидно, установку размера шрифта в процентах полностью отвергать нельзя. Это необходимо для того, чтобы учитывать пользовательские установки браузера (если таковые отличаются от дефолтных). Однако далее необходим полный переход на относительные единицы (em). Обычно я поступаю следующим образом:

  1. Устанавливаю font-size для body в 62.5%
  2. Поскольку теперь 1em становится равным 10px, далее использую для font-size только относительные значения, например 1.2em
  3. Соответствие между em и px определяем по формуле "1em = 10px"

Пример такого решения выглядит гораздо читабельнее:

body      { font-size:62.5%; }
#header   { font-size:.9em; }
#main     { font-size:1.1em; }

Кроме всего прочего, достигается подход pixel-perfect и полная кроссбраузерность в отображении font-size. И клиенты довольны и верстальщики целы.

Заинтересовались? Звоните нам по телефонам +375 (29) 774-35-89 и +375 (44) 774-35-89 в Минске. Мы будем рады помочь Вам в реализации Вашего проекта.

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

Новый комментарий

Для редактирования комментария осталось 10 минут