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

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

8 ответов


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

заключение:

размер текста и высоты строки в 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,5 Эм это же как 150%. Единственное преимущество, кажется, читаемость, выбрать то, что вам наиболее комфортно.


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

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

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

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

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


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


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

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

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

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


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

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


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

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