如果文档的字体大小在 em 中指定，啥是“em”？

Posted 2023-03-06

【中文标题】如果文档的字体大小在 em 中指定，啥是“em”？

【英文标题】：What is an "em" if the font-size of the document is specified in ems?如果文档的字体大小在 em 中指定，什么是“em”？

【发布时间】：2012-05-15 06:58:36

【问题描述】：

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

<style type = "text/css">
body

    font-size: 1em;

</style>

所以，em 现在是递归定义的。那么浏览器是如何处理的呢？

W3C docs 说：

“em”单位等于“font-size”的计算值 使用它的元素的属性。例外是当 'em' 出现在 'font-size' 属性本身的值中，其中 case 它指的是父元素的字体大小。它可以用来 用于垂直或水平测量。 （这个单位有时也 在印刷文本中称为四边形。）

但是如果元素是document.body，所以没有父元素呢？

【问题讨论】：

em 基于给定元素的font-size，或者如果它设置在font-size 上，则它相对于其父元素。如果你想要一个相对于文档根目录的font-size 的单位，那就是rem。

【参考方案1】：

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

即使您在body 和html 上 都在ems 中设置了font-size 值，这仍然适用。所以如果你这样做：

html, body  font-size: 2em; 

然后，假设用户设置的默认字体大小为16px，html 的字体大小为32px（默认字体大小的两倍），body 的字体大小为@ 987654334@（其父级的两倍，html）。

---

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

【讨论】：

16px 是某些标准强制要求的默认值，还是只是大多数（所有？）浏览器碰巧遵循的值？

@Channel72 您可以在所有重要浏览器的用户首选项中更改浏览器默认使用的大小。

【参考方案2】：

如果没有父元素定义它，它将采用浏览器的默认值 16px。

另见：http://pxtoem.com/

【参考方案3】：

它将与浏览器的默认字体大小相关，它将以物理大小指定，例如'10pt'。

【讨论】：

不，您的示例具有误导性。浏览器中的默认字体大小通常不在pt 中指定，而是在px 中指定。例如。 Chrome 和 Firefox 都只允许在 px 中指定浏览器默认字体大小。