Размер шрифта в CSS звучит так, как будто это должно быть легко. Пока не попробуешь. Многие разработчики используют силу; они возятся со свойством font-size до тех пор, пока оно не будет выглядеть правильно, только чтобы найти его в другом браузере. Небольшое понимание может иметь большое значение …
Свойство font-size
Свойство font-sizebr Ему могут быть назначены различные абсолютные, относительные параметры или параметры размера длины.
Элемент будет наследовать размер шрифта своего родителя, если вы не переопределите его. Это особенно важно, когда вы указываете относительные размеры.
Absolute Font Sizing Ключевые слова
Доступно несколько ключевых слов с абсолютным размером шрифта. Размер шрифта определяется из предустановки браузера, и элемент не будет наследовать размер своего родителя.
- размер шрифта: хх-маленький;
- размер шрифта: х-маленький;
- размер шрифта: маленький;
- размер шрифта: средний;
- размер шрифта: большой;
- размер шрифта: х-большой;
- размер шрифта: хх-большой;
Хотя большинство браузеров поддерживают эти ключевые слова, точные размеры будут отличаться. Это довольно грубый метод определения размера шрифта, и большинство разработчиков его избегают.
Относительные ключевые слова для определения размера шрифта
Доступны два относительных ключевых слова для определения размера шрифта. Размер шрифта соответствует его родительскому элементу:
- размер шрифта: меньше;
- размер шрифта: больше;
Например, если родитель имеет размер шрифта «средний», значение «больше» установит для элемента «большой». Другие единицы шрифта обычно изменяются с коэффициентом около 1,2, но, опять же, стандарта нет, и результаты браузера будут отличаться.
Абсолютные длины
font-size
- мм : миллиметры, например 10 мм.
- см : сантиметры, например, 1 см (= 10 мм).
- дюймы, например 0,39 дюйма (~ = 10 мм).
- pt : точка, где 1pt обычно считается 1/72 дюйма, например 12pt.
- ПК : Пика, где 1 шт. 12pt
- px : пиксель, например 14px.
В общем, есть проблемы со всеми этими единицами измерения. Миллиметры, сантиметры и дюймы неточны для среды на основе экрана. Точки и изображения ненадежны, так как системы могут использовать различные настройки dpi . Пиксель кажется наиболее подходящим, но это может привести к проблемам доступности, потому что размер текста не может быть изменен в IE .
Относительные длины
font-size
- em : 1em эквивалентно текущему размеру шрифта, поэтому 2em в два раза больше.
- % : 100% эквивалентно текущему размеру шрифта, поэтому 200% в два раза больше.
- пример: 1ex соответствует высоте буквы ‘x’ в текущем шрифте.
Немногие разработчики используют «ex», но это может быть полезно в некоторых ситуациях, когда вам нужен мелкозернистый размер шрифта, например 1ex, а не 0.525em.
Размеры в процентах и ’em’ эквивалентны, например, 50% = 0,5em, 100% = 1em, 120% = 1,2em и т. Д. Некоторые браузеры имеют незначительные различия, но это редко является серьезной проблемой. Если вы хотите сохранить каждый байт, вы можете выбрать самое короткое определение, то есть 50% короче, чем 0,5em, а 1em короче, чем 100%.
Размер текста и масштабирование страницы
Вот тут-то и закрадывается дополнительная сложность. Большинство браузеров позволяют пользователю:
- увеличить или уменьшить базовый размер текста (размеры изображения не меняются)
- увеличить или уменьшить масштаб страницы, чтобы весь текст и графика изменились соответственно, или
- разрешить как размер текста и масштабирование страницы.
Чтобы еще больше усложнить ситуацию, Internet Explorer не позволяет изменять размер текста в элементах, размер шрифта которых определяется в пикселях (px).
Если вы дизайнер, переходящий в Интернет с печатного фона, вам будет неудобно давать пользователю столько возможностей. Ваш дизайн может испортиться, если пользователь увеличит изображение на 200%, но уменьшит размер текста до 50%. И — нет — вы ничего не можете сделать, чтобы предотвратить это. Как и вы.
Рекомендации по изменению размера шрифта CSS
По общему мнению, «em» или «%» — лучшее решение в большинстве ситуаций. Шрифты можно точно масштабировать относительно друг друга, и поддерживается выбор размера текста в браузере. Я также рекомендовал бы использовать процентный font-size это приводит к улучшению размера текста в некоторых старых браузерах.
Есть несколько других рекомендаций, которые я бы предложил при разработке сайта:
- сбросьте размер шрифта и масштаб страницы до значений по умолчанию во всех ваших браузерах перед тестированием (это меня несколько раз поймало!)
- попробуйте разумные комбинации изменения размера текста и масштаба страницы в различных браузерах, чтобы текст оставался читаемым.
Размер шрифта вызывал у вас проблемы? У вас есть другие советы?