При создании веб сайта всегда приходится использовать динамическую размерность шрифтов. Самым простым способом является использование процентов. Такое решение позволяет достичь несколько целей:
- Обеспечить простое изменение размеров шрифта для любого элемента
- Обеспечить адаптацию размера шрифта под пользовательские установки браузера
Однако опыт разработки веб-проектов показывает, что чистое использование процентов нередко приводит к весьма запутанным ситуациям. Кроме того, при этом не всегда обеспечивается подход 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). Обычно я поступаю следующим образом:
- Устанавливаю 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. И клиенты довольны и верстальщики целы.
Заинтересовались? Звоните нам по телефонам +375 (29) 774-35-89 и +375 (44) 774-35-89 в Минске. Мы будем рады помочь Вам в реализации Вашего проекта.