Размер шрифта в CSS -% или их?

Question

При установке размера шрифтов в CSS, следует ли использовать процентное значение (%) или em? Можете ли вы объяснить преимущество?

Answer 1

Есть действительно хорошая статья о веб-типографике на A List Apart .

Их вывод:

Размер текста и высота строки в ems, с процентом, указанным на тело (и дополнительное предупреждение для Safari 2), было показано, чтобы обеспечить точный, изменяемый размер текста во всех браузеры в общем использовании сегодня. Это Техника, которую вы можете положить в свой комплект сумка и использовать в качестве лучшей практики для размер текста в CSS, который удовлетворяет как дизайнеры и читатели.

Answer 2

С http://archivist.incutio.com/viewlist/css-discuss/1408

%: некоторые браузеры не обрабатывают процент за размер шрифта, но интерпретирует 150% как 150px. (Некоторые версии NN4, например.) IE также имеет проблемы с процентами по вложенным элементам. Это кажется, IE использует процент по отношению к окно просмотра вместо относительно родительский элемент. Еще одна проблема (хотя и правильно согласно W3C specs), в Moz / Ns6 вы не можете использовать процентов по отношению к элементам без указанная высота / ширина.

em: Иногда браузеры используют неверно эталонный размер, но относительного единицы это тот, с наименьшим проблемы. Вы можете найти это хотя иногда интерпретируется как px.

pt: сильно отличается резолюции, и не должны использоваться для отображения. Это довольно безопасно для использование печати, хотя.

px: единственная надежная абсолютная единица на экран. Это может быть неправильно интерпретируется в печати, хотя, как один точка обычно состоит из нескольких пикселей, и, таким образом, все становится смехотворно маленький.

Answer 3

Оба корректируют размер шрифта относительно того, что было. 1.5em - это 150%. Кажется, что единственным преимуществом является удобочитаемость.

Answer 4

Учитывая, что (почти?) Все браузеры теперь изменяют размер страницы в целом, а не только текст, предыдущие проблемы с px против % против em с точки зрения изменения размера доступного шрифта довольно спорный вопрос.

Итак, ответ таков: это, вероятно, не имеет значения. Используйте все, что работает для вас.

% хорошо, потому что позволяет относительное изменение размера.

px приятно, потому что довольно легко управлять ожиданиями при его использовании.

em может быть полезно, когда также используется для элементов макета, так как он позволяет учитывать пропорциональные размеры, связанные с размером текста.

Answer 5

Реальная разница становится очевидной, когда вы используете ее не для размеров шрифта. Установка padding из 1em отличается от 100%. em всегда относительно размера шрифта. Но % может быть относительно размера шрифта, ширины, высоты и, возможно, некоторых других вещей, о которых я не знаю.

Answer 6

Относительно разницы между единицами css % и em.

Насколько я понимаю (по крайней мере, теоретически / концептуально, но, возможно, не так, как эти две единицы могут быть реализованы в браузерах), эти две единицы эквивалентны, т. Е. Если вы умножите значение em на 100, а затем замените em с % должно быть то же самое?

Если между em и% действительно есть какая-то реальная разница, то может ли кто-нибудь объяснить это (или дать ссылку на объяснение)?

(Я хотел добавить этот комментарий к своему месту, то есть с отступом чуть ниже ответа на "Liam, answered Sep 25 '08 at 11:21", так как я также хочу знать, почему его ответ был опущен, но я не мог понять, как разместить свой комментарий там и поэтому пришлось написать этот "глобальный поток" ответ)

Answer 7

Библиотека пользовательского интерфейса Yahoo (http://developer.yahoo.com/yui/) имеет хороший набор базовых классов CSS, используемых для «сброса» настроек браузера, чтобы основа для отображения сайта была одинаковой для всех (поддерживаемых) браузеров .

При использовании YUI предполагается использование процентов.

Answer 8

Как упоминает Галвегиан, px является наиболее надежным для веб-типографики, так как все остальное, что вы делаете на странице, в основном выкладывается со ссылкой на монитор компьютера. Проблема с абсолютными размерами заключается в том, что некоторые браузеры (IE) не будут масштабировать элементы пиксельных значений на веб-странице, поэтому при попытке увеличения ввода / вывода все настраивается за исключением тех элементов.

Я не знаю, правильно ли IE8 справляется с этим, но все другие поставщики браузеров обрабатывают пиксели очень хорошо, и это все еще меньший случай, когда пользователю нужно увеличить / уменьшить текст (это текстовое поле на SO, возможно, является исключением). Если вы хотите сильно испачкаться, вы всегда можете добавить функцию javascript для увеличения размера текста и предложить пользователю кнопку «маленький» / «больше».