Содержание
Когда вы создаете веб-страницу, большинство профессионалов рекомендуют измерять шрифты (и фактически все) с относительной мерой, такой как ems, exs, проценты или пиксели. Это потому, что вы действительно не знаете всех возможных способов просмотра вашего контента. И если вы используете абсолютную меру (дюймы, сантиметры, миллиметры, точки или изображения), это может повлиять на отображение или читаемость страницы на разных устройствах. И W3C рекомендует использовать EMS для размеров.
Но насколько большой их?
Согласно W3C:
«равно вычисленному значению свойства ‘font-size’ элемента, для которого оно используется. Исключением является случай, когда ’em’ встречается в значении самого свойства ‘font-size’, и в этом случае оно ссылается к размеру шрифта родительского элемента. «
Другими словами, ems не имеют абсолютного размера. Они принимают значения своего размера в зависимости от того, где они находятся. Для большинства веб-дизайнеров это означает, что они находятся в веб-браузере, поэтому шрифт высотой 1 метр в точности совпадает с размером шрифта по умолчанию для этого браузера.
Но какой рост по умолчанию? Невозможно быть на 100% уверенным, так как клиенты могут изменить размер шрифта по умолчанию в своих браузерах, но, поскольку большинство людей этого не делают, вы можете предположить, что в большинстве браузеров размер шрифта по умолчанию составляет 16 пикселей. Так что большую часть времени 1em = 16px.
Подумайте в пикселях, используйте EMS для измерения
Как только вы узнаете, что размер шрифта по умолчанию составляет 16 пикселей, вы можете использовать ems, чтобы позволить вашим клиентам легко изменять размер страницы, но в пикселях указывать размеры шрифта. Допустим, у вас есть структура размеров примерно такая:
- Заголовок 1 — 20 пикселей
- Заголовок 2 — 18 пикселей
- Заголовок 3 — 16 пикселей
- Основной текст — 14px
- Подтекст — 12px
- Сноски — 10px
Вы можете определить их таким образом, используя пиксели для измерения, но тогда любой, кто использует IE 6 и 7, не сможет хорошо изменить размер вашей страницы. Таким образом, вы должны преобразовать размеры в ems, и это всего лишь вопрос математики:
- Заголовок 1 — 1,25em (16 х 1,25 = 20)
- Заголовок 2 — 1,125em (16 × 1,125 = 18)
- Заголовок 3 — 1em (1em = 16px)
- Основной текст — 0,875em (16 x 0,875 = 14)
- Подтекст — 0,75em (16 x 0,75 = 12)
- Сноски — 0,625em (16 x 0,625 = 10)
Не забывайте наследство!
Но это еще не все. Другая вещь, которую вы должны помнить, это то, что они принимают размер родителя. Поэтому, если у вас есть вложенные элементы с разными размерами шрифта, вы можете получить шрифт, который будет намного меньше или больше, чем вы ожидаете.
Например, у вас может быть такая таблица стилей:
p {font-size: 0.875em; }
.сноска {font-size: 0.625em; }
Это приведет к появлению шрифтов размером 14px и 10px для основного текста и сносок соответственно. Но если вы поместите сноску в абзац, вы можете получить текст размером 8,75 пикселей, а не 10 пикселей. Попробуйте сами, поместите этот CSS и следующий HTML в документ:
Этот шрифт имеет высоту 14px или 0.875 ems.
Поэтому, когда вы используете ems, вы должны очень внимательно следить за размерами родительских объектов, иначе у вас будут действительно нечетные элементы на вашей странице.