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