Что такое единица размера шрифта em? Сколько это в пикселях?
Я хочу знать, что em unit is, и сколько 1em при преобразовании в pixels (px). Я также где-то читал о какой-то ошибке IE, чтобы преодолеть, какой размер шрифта тела должен быть установлен на что-то, но не мог следовать много. Кто-нибудь может объяснить это подробно?
8 ответов
несмотря на то, что вы можете прочитать где угодно, есть нет прямая связь между em и px.
как говорится в одной из ссылок:
значение" em " основано по ширине верхнего регистра M
Так что это будет по-разному для каждого шрифта. Узкий шрифт может иметь ту же высоту (в px), что и расширенный шрифт, но размер em будет отличаться.
редактировать три года позже:
теперь есть много источников, которые говорят, что 1em = размер шрифта (в px). То есть, когда вы пишете font-size:16px, затем 1эм = 16 пикселов. Это все еще не согласуется с источником Adobe (который говорит 1em = размер шрифта в pt), но в любом случае это кажется странным; размер em будет слишком большим с конденсированными шрифтами и слишком маленьким с расширенными шрифтами.
Я собираюсь сделать несколько тестовых страниц и посмотреть сам.
и также:
Я вижу, что никто (включая меня) на самом деле не ответил на вопрос (который был отчасти скрыт):
Я также где-то читал о какой-то ошибке ie и преодолеть, что установить размер шрифта тела на что-то
По данным на этой странице, вам нужно добавить это в свой css:html{ font-size:100%; }. Этой странице шесть лет, и я не читал (сотни) комментариев, поэтому я не знаю, актуальна ли она по-прежнему.
M-принцип, что em основан на букве M и зависит от шрифта, является часто заявляемым мифом!! документация по W3C em очень кратко описывает, как именно ems и пиксели связаны. Использование буквы M для вычисления размеров шрифта, по крайней мере, слишком сложно и ненужно.
единица 'em' равна вычисляемой значение свойства 'font-size' элемент, на котором он используется. Этот исключение-когда ' em ' происходит в значение свойства 'font-size' сам, в этом случае он ссылается на размер шрифта родительского элемента. Он может использоваться для вертикального или горизонтального измерение.
вот основные моменты.
без увеличения предка 1em точно равен атрибуту размера шрифта пикселя.
увеличение предка с помощью X-ems или x-процентов означает, что вы просто умножаете на очевидные соотношения x или x/100. Таким образом простой цикл java-скрипта вычислит точные размеры шрифта, предполагая: (1) нет C. S. S, чтобы расстроить java-скрипт; и (2) у некоторых предков есть размер шрифта, установленный в абсолютных единицах. Это вычисленное значение, о котором говорит документация. Ручной расчет может обойти C. S. S., Но абсолютная единица все равно должна быть найдена в цепи предков.
поскольку EMS измеряет ширину, вы всегда можете вычислить точный размер шрифта, создав div длиной 1000 ems и разделив его свойство ширины клиента на 1000. Поскольку ems округлены до ближайшей тысячной, вам нужно 1000 ems, чтобы избежать ошибочного усечения пикселей.
вы, вероятно, можете создать шрифт, где m-принцип терпит неудачу, так как em основан на атрибуте размера шрифта, а не на фактическом шрифте. Предположим, у вас есть странный шрифт, где M составляет 1/3 размера других символов, и у вас есть размер шрифта 10 пикселей. Не думаете ли вы, что размер шрифта пикселя гарантирует максимальную высоту символа в некотором роде и поэтому M не будет 10 пикселей, а все остальные символы 30 пикселей?
предупреждение
- главное предостережение к (2) заключается в том, что относительное отношение единицы ex дико неустойчиво. В том же браузере с постоянным шрифтом относительное соотношение может меняться с размером шрифта. Относительное соотношение ex также изменяется с браузером даже с тем же размером шрифта и безопасным шрифтом браузера, таким как Georgia. Это довольно хорошая причина, чтобы никогда используйте ex блок если вы хотите соответствие. Если используется единица ex, невозможно вычислить размер шрифта через цепочку предков.
он рассчитывается от любого размера шрифта вашего тела. Вы можете использовать конвертер pixel в em, чтобы узнать, что именно находится на вашем сайте.
em-это измерение, используемое в печатной типографии первоначально (согласно Википедии). Вот некоторые вещи, которые следует учитывать: если em определяется как тип 12pt, то em составляет 12/72 дюйма печатной страницы; но если вы определяете em как 16px, его ширина в дюйме зависит от разрешения носителя. (Примечание: разрешение 72ppi до 120ppi раньше считалось стандартом "безопасного браузера" до появления мобильных устройств.) Итак, когда ваши пользователи находятся на устройстве ширины 300px, 1em as 16px-это много " реального имущество." Лучшее использование измерений em, на мой взгляд, - это определение абзацев текстов для эффективного баланса белого пространства, а не для макета страницы или позиционирования.
эта ссылка может помочь вам http://jontangerine.com/log/2007/09/the-incredible-em-and-elastic-layouts-with-css
цитата из этой статьи:
мы знаем, что 1em является всегда равно размеру шрифта родительского элемента, поэтому:
1 ÷ parent font-size × required pixel value = em valueВ закладки: пиксель в таблицу преобразования ems для размеров шрифта.
названный в честь буквы "M", блок em имеет давнюю традицию в типографии, где он использовался для измерения горизонтальной ширины. Например, длинный тире, часто встречающийся в американских текстах ( -- ), известен как "em-dash", поскольку он исторически имел ту же ширину, что и буква "M". Его более узкий кузен ( - ), часто встречающийся в европейских текстах, аналогично упоминается как "en-dash".
значение "em" изменилось с годами. Не все шрифты имеют букву "M" в них (например, китайский), но все шрифты имеют высоту. Поэтому этот термин стал означать высоту шрифта, а не ширину буквы "М".
из "удивительный блок em и другие лучшие практики"https://www.w3.org/WAI/GL/css2em.htm
em почти такой же, как процент, я предлагаю прочитать http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/