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