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

Question

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

Answer 1

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

Их вывод:

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

Answer 2

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

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

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

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

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

Answer 3

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

Answer 4

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

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

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

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

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

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

Answer 8

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

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