Что такое единица измерения размера шрифта? Сколько это в пикселях?

Question

Я хочу знать, что такое единица измерения em и сколько составляет 1em при преобразовании в пиксели (px). Я также где-то читал о некоторой ошибке в IE, чтобы преодолеть, какой размер шрифта тела должен быть установлен на что-то, но не мог следовать многому. Может кто-нибудь объяснить это подробно?

Answer 1

Несмотря на то, что вы можете прочитать в другом месте, существует прямая связь * между em и px.

Как указано в одной из ссылок:

значение "em" основано по ширине заглавных букв M

Так что это будет отличаться для каждого шрифта. Узкий шрифт может иметь ту же высоту (в пикселях), что и расширенный шрифт, но размер em будет другим.

РЕДАКТИРОВАТЬ три года спустя:

В настоящее время существует множество источников, в которых говорится, что 1em = размер шрифта (в пикселях). То есть когда вы пишете font-size:16px, то 1em = 16px. Это по-прежнему не согласуется с источником Adobe (где 1em = размер шрифта в pt), но в любом случае это кажется странным; размер em будет слишком большим для сжатых шрифтов и слишком маленьким для расширенных шрифтов.

Я собираюсь сделать несколько тестовых страниц и лично убедиться.

А также:

Я вижу, что никто (включая меня) на самом деле не ответил на вопрос (который был отчасти скрыт):

Я также где-то читал о какой-то ошибке, т. Е. О том, что нужно установить размер шрифта основного текста на

Согласно этой странице , вам нужно добавить это к вашему css: html{ font-size:100%; }. Этой странице шесть лет, и я не прочитал (сотни) комментариев, поэтому не знаю, актуальна ли она по-прежнему.

Answer 2

М-принцип, согласно которому em основывается на букве M и зависит от шрифта, часто является мифом !! W3c em документация очень кратко описывает, как именно соотносятся ems и пиксели. Использование буквы M для вычисления размеров шрифта по меньшей мере слишком сложно и не нужно.

Единица 'em' равна вычисленной значение свойства 'font-size' элемент, на котором он используется. Исключение составляют случаи, когда «em» встречается в значение свойства 'font-size' сама, в этом случае это относится к размер шрифта родительского элемента. Это может использоваться для вертикальной или горизонтальной измерение.

Вот основные моменты.

1. Без увеличения предка 1em в точности соответствует атрибуту font-size пикселя.

2. Увеличение предка с помощью x-ems или x-процента означает, что вы просто умножаетесь на очевидные отношения x или x / 100. Таким образом, простой цикл java-script будет вычислять точные размеры шрифта, предполагая: (1) нет C.S.S, чтобы расстроить java-script; и (2) у некоторого предка размер шрифта установлен в абсолютных единицах. Это вычисленное значение, о котором идет речь в документации. Вычисление руки может обойти C.S.S., но абсолютная единица все еще должна быть найдена в цепочке предков.

3. Поскольку ems измеряет ширину, вы всегда можете вычислить точный размер шрифта, создав div длиной 1000 ems и разделив его свойство client-Width на 1000. Поскольку ems округляются до ближайшей тысячной, вам нужно 1000 ems избегать ошибочного усечения пикселей.

4. Возможно, вы можете создать шрифт, в котором M-принцип не работает, поскольку em основан на атрибуте font-size, а не на фактическом шрифте. Предположим, у вас есть странный шрифт, где M равен 1/3 размера других символов, а размер шрифта составляет 10 пикселей. Разве вы не думаете, что размер шрифта в пикселях каким-то образом гарантирует максимальную высоту символа, поэтому M не будет 10 пикселей, а все остальные символы 30 пикселей?

Предупреждение

1. Главное замечание к (2) заключается в том, что относительное отношение бывшей единицы крайне нестабильно. В том же браузере с постоянным шрифтом относительное соотношение может изменяться в зависимости от размера шрифта. Относительное соотношение ex также изменяется в браузере даже при том же размере шрифта и шрифте, безопасном для браузера, как Грузия. Это довольно веская причина, чтобы никогда не использовать бывшее устройство, если вы хотите соответствия. Если используется модуль ex, невозможно вычислить размер шрифта через цепочку предков.

Answer 3

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

PxToEm

Answer 4

em - это измерение, используемое в печатной типографии изначально (согласно википедии). Вот несколько моментов, на которые следует обратить внимание: если em определен как тип 12pt, то em составляет 12/72 дюйма напечатанной страницы; но если вы определяете em как 16px, его ширина в дюймах зависит от разрешения носителя. (Примечание. До появления мобильных устройств разрешение от 72 до 120 пикселей на дюйм раньше считалось стандартом «безопасного браузера».) Таким образом, когда ваши пользователи используют устройства шириной 300 пикселей, 1em при 16 пикселях является большой «недвижимостью». На мой взгляд, лучше всего использовать измерения em для определения абзацев текста, чтобы эффективно балансировать пустое пространство, а не для макета страницы или позиционирования.

Answer 5

Названный в честь буквы «М», у единицы em есть давняя традиция в типографии, где она использовалась для измерения горизонтальной ширины.Например, длинная черта, часто встречающаяся в американских текстах (-), известна как «em-dash», поскольку исторически она имела ту же ширину, что и буква «M».Его более узкий двоюродный брат (-), часто встречающийся в европейских текстах, также называется «en-dash».

Значение «em» менялось с годами.Не все шрифты имеют букву «М» (например, китайский), но все шрифты имеют высоту.Таким образом, этот термин означает высоту шрифта, а не ширину буквы «М».

Из «Удивительной единицы em и других лучших практик» https://www.w3.org/WAI/GL/css2em.htm

Answer 6

эта ссылка может вам помочь 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 для размеров шрифта.

Answer 7

EM - это единица измерения, пропорциональная размеру шрифта шрифта.

Answer 8

em - это почти столько же, сколько и в процентах, я предлагаю прочитать http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/