html - 如果文档的字体大小以 em 指定，那么 "em"是什么？

Question

在 CSS 中，em 是一个基于文档字体大小的相对单位。那么，如果文档本身 的字体大小以em 为单位，那么em 到底是什么？假设我们说:

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

因此，em 现在被递归定义了。那么浏览器是如何处理的呢？

W3C docs说:

The 'em' unit is equal to the computed value of the 'font-size' property of the element on which it is used. The exception is when 'em' occurs in the value of the 'font-size' property itself, in which case it refers to the font size of the parent element. It may be used for vertical or horizontal measurement. (This unit is also sometimes called the quad-width in typographic texts.)

但是如果元素是document.body，那么没有父元素呢？

Answer 1

body 不是文档根元素——这是一个很常见的误解。 body 的父元素是 html，其默认字体大小与浏览器的默认字体大小设置相匹配(通常为 16px)。¹

即使您在 body 和 html 上设置了以 em 为单位的 font-size 值，这也适用。所以如果你这样做:

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

然后，假设用户设置的默认字体大小为 16px，html 的字体大小将为 32px(是 32px 的两倍默认字体大小)和 body 的字体大小为 64px(是其父级 html 的两倍)。

---

¹ _{准确地说，html 元素的默认字体大小是the initial value, medium ，根据规范对应于用户设置的首选默认字体大小。}