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

Ответ 1

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

Их вывод:

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

Ответ 2

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

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

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

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

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

Ответ 3

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

Ответ 4

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

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

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

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

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

Ответ 5

Также очень полезная ссылка: http://www.w3schools.com/css/css_font.asp

Ответ 6

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

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

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

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

Ответ 7

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

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

Ответ 8

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

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