1Em font size: font-size — CSS: Cascading Style Sheets

css. Является ли 1.0em таким же, как 100% для размеров шрифта?

спросил

Изменено 12 лет, 10 месяцев назад

Просмотрено 6к раз

Я пытаюсь отладить, почему размер шрифта : 1.0em в jquery-ui приводит к тому, что размеры шрифта для моей страницы становятся огромными (более 16 пикселей) без фактического изменения размера шрифтов. Ну, в Firebug я увидел странную вещь для аккордеона.

Изначально у него был размер шрифта : 1.0em , но позже он был заменен размером шрифта : 100% . Может ли это вызвать какую-то проблему с размером шрифта? У меня всегда было впечатление, что 100% было таким же, как 1.0em

  • css
  • размер шрифта

1

Да.

1em и 100% означают одно и то же (для размера шрифта) — «Тот же размер шрифта, что и у родительского элемента» (что не то же самое, что размер шрифта, выбранный пользователем, если вы не говоря об элементе HTML).

В Internet Explorer возникают ошибки, когда используется em и размер шрифта, выбранный в меню просмотра, не равен средний .

Да, em и проценты взаимозаменяемы с точки зрения размера шрифта.

Я не могу точно сказать, что происходит в вашем случае без кода, но это может быть как-то связано с размерами вложенных шрифтов:

 
Этот текст составляет 150% от базы. <дел> Этот текст имеет тот же размер, что и текст выше.

1

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

Это означает, что 1em может быть 16px или 10px в соответствии с настройками пользователя в браузере.

Если вы хотите лучше контролировать размер шрифта, используйте px вместо em .

1

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но никогда не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

css — Что такое размер шрифта em? Сколько это в пикселях?

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

  • css
  • размер шрифта

0

Несмотря на то, что вы можете прочитать в другом месте,

нет прямой связи между em и px.

Как гласит одна из ссылок:

значение «em» основано по ширине прописной М

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

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

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

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

А также:

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

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

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

4

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

Единица ’em’ равна вычисленной значение свойства ‘font-size’ элемент, на котором он используется.

исключение, когда ’em’ встречается в значение свойства ‘font-size’ себя, и в этом случае он относится к размер шрифта родительского элемента. Это может использоваться для вертикального или горизонтального измерение.

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

  1. Без увеличения предка 1em точно соответствует атрибуту размера шрифта в пикселях.

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

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

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

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

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

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

PxToEm

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

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

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

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

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

эта ссылка может вам помочь http://jontangerine.com/log/2007/09/the-incredible-em-and-elastic-layouts-with-css

Цитата из этой статьи:

Мы знаем, что 1em равно , всегда равно размеру шрифта родительского элемента, следовательно:

 1 ÷ размер родительского шрифта × необходимое значение в пикселях = значение em
 

Для ваших закладок: Таблица преобразования пикселей в ems для размеров шрифта.