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

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

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

Их вывод:

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

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

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

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

pt: сильно различается между разрешениями и не должен использоваться для отображения. Однако это вполне безопасно для печати.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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