为什么当您将h1和p设置为2em (字体大小: 2em)时，当em是字体大小的x倍的单位时，它们的大小几乎相同？

Question

我有一些带有自定义字体的HTML页面，为了让它看起来更好看，我通常使用css对文本进行评估，但是当我浏览文档时，他们说em是原始字体大小的x倍，我认为这是我将要使用的内容，但是当我使用它时，结果如下：

​

* {
  font-size: 1.5em;
}

<h1>
  Header
</h1>
<p>
  Paragraph
</p>

​

注意，它显示的结果是h1和p大小几乎相同，除了h1更厚和更暗，但是为什么2em不意味着比原始文本大2倍呢？为什么h1缩小了，p缩小了？

为了让结果正确显示，我把字体大小设置为1.5em，而不是2em，否则字体太大了。

Answer 1

在em中设置字体大小时，是相对于父元素的字体大小设置的。

由于两个元素具有相同的父元素，因此它们的字体大小相同。

这些差异是由于它们对其他属性(例如字体重量)具有不同的值。

如果没有该样式规则，您将不会相对于它的字体大小来设置它。级联不是那样工作的。

当我翻阅文件时，他们说…

不信任W3Schools!他们经常是错的。

看看官方规范

“em”单位等于使用它的元素的“字体大小”属性的计算值。例外情况是，“em”出现在“字体大小”属性本身的值中，在这种情况下，它引用父元素的字体大小。它可以用于垂直或水平测量。(在印刷文本中，这个单位有时也称为四宽。)

Answer 2

你是对的。它根据父元素的字体大小对其进行缩放。

确保您已经声明了css中的身体部分的原始大小。您也可以在浏览器中右键单击元素并单击“检查”。这将揭示正在应用的样式。您可能有一些正在应用于页眉的字体权重。