如果文档的字号使用em作为单位,那么什么是“em”?

13
在 CSS 中,em 是一个相对单位,它基于文档的字体大小而定。那么,如果文档本身的字体大小也是使用 em 进行度量的话,em 究竟是什么呢?假设我们这样说:
<style type = "text/css">
body
{
    font-size: 1em;
}
</style>

因此,现在em被递归定义。那么浏览器是如何处理它的呢?

W3C文档说:

'em'单位等于其使用的元素的 'font-size' 属性的计算值。例外情况是,当 'em' 出现在 'font-size' 属性本身的值中时,它指的是父元素的字体大小。它可以用于垂直或水平测量。(这个单位在排版文本中有时也称为“四分之一宽度”)。

但如果元素是document.body,那么就没有父元素了怎么办?


1
em 基于给定元素的 font-size,或者如果它设置在 font-size 上,则相对于其父级。如果您想要一个相对于文档根的 font-size 的单位,那就是 rem - BoltClock
3个回答

29

body不是文档根元素,这是一个非常普遍的误解。 body元素的父级元素是html元素,其默认字体大小与浏览器的默认字体大小设置相匹配(通常为16px)。1

即使在两个bodyhtml元素上都设置了以ems为单位的font-size值,这一点仍然适用。所以如果您这样做:

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

假设用户默认字体大小为16px,则html元素的字体大小为32px(是默认字体大小的两倍),body元素的字体大小为64px(是父元素html元素的两倍)。


1 确切地说,html元素的默认字体大小是初始值medium,根据规范,它对应于用户设置的首选默认字体大小。


16px 的默认值是由某个标准规定的,还是只是大多数(全部?)浏览器都遵循的一个值呢? - Channel72
@Channel72 你可以在所有重要的浏览器的用户首选项中更改浏览器默认使用的大小。 - Mr Lister

0

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

也可以参考这个链接: http://pxtoem.com/


-2

它将与浏览器的默认字体大小相关,该大小将以物理尺寸指定,例如“10pt”。


不,你的例子是误导性的。浏览器中默认的字体大小通常不是以 pt 为单位指定的,而是以 px 为单位。例如,Chrome 和 Firefox 只允许以 px 为单位指定浏览器默认字体大小。 - Michael Große

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接