Что такое "em", если размер шрифта документа указан в ems?

В CSS, em - относительная единица, основанная на размере шрифта документа. Итак, что же такое em, тогда, если размер шрифта самого документа измеряется в ems? Предположим, что:

<style type = "text/css">
body
{
    font-size: 1em;
}
</style>

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

Документы W3C говорят:

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

Но что, если элемент document.body, поэтому нет родительского элемента?

Ответы

Ответ 1

body не является корневым элементом документа - это очень распространенное заблуждение. Родительский элемент body - html, размер шрифта по умолчанию которого соответствует настройке размера шрифта браузера по умолчанию (обычно 16px). 1

Это применимо, даже если вы устанавливаете значение font-size в ems как на body, так и на html. Итак, если вы это сделали:

html, body { font-size: 2em; }

Затем, предполагая размер шрифта по умолчанию 16px, заданный пользователем, html будет иметь размер шрифта 32px (в два раза больше размера шрифта по умолчанию) и body будет иметь размер шрифта 64px (дважды его родителя, html).

1 Чтобы быть точным, размер шрифта html по умолчанию начальное значение, medium, который согласно спецификации соответствует предпочитаемому размеру шрифта по умолчанию, заданному пользователем.

Ответ 2

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

Также см. это: http://pxtoem.com/

Ответ 3

Это будет относиться к тому, что размер шрифта браузера по умолчанию, который будет указан в физическом размере, например. '10pt'.