Question

我有一些带有自定义字体的HTML页面，为了让它看起来更好，我通常使用css调整文本大小，但是当我查看document时，他们说em是原始字体的x倍尺寸，我认为这是我将要使用的，但是当我使用它时，结果如下：

* {
  font-size: 1.5em;
}

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

请注意，它显示的结果是h1和p几乎相同，只有h1更厚更暗，但为什么会发生这种情况不是2em意味着2倍更大比原文？为什么h1会缩小，p会缩小？

P.S。为了正确显示结果，我将font-size设置为1.5em而不是2em，否则会太大

Answer 1

在em中设置字体大小时，您将相对于父元素的字体大小进行设置。

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

差异是由于它们具有不同的其他属性值（例如font-weight）。

您没有相对于没有该样式规则的字体大小设置它。 Cascade并不像那样工作。

当我查看他们说的文件时......

不要相信W3Schools！他们经常出错。

查看the official specification：

＆＃39;＆＃39; unit等于＆＃39; font-size＆＃39;的计算值。使用它的元素的属性。 例外情况是＆＃39; em＆＃39;出现在＆＃39; font-size＆＃39;的值中。属性本身，在这种情况下，它引用父元素的字体大小。它可用于垂直或水平测量。（此单位有时也称为印刷文本中的四边形。）

Answer 2

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

请确保您已在css中声明了原始尺寸对于您的身体部位。您也可以右键单击元素，然后在浏览器中单击“检查”。这将揭示正在应用的样式。您可能有一些字体权重应用于标题

为什么h1和p在将它们设置为2em（font-size：2em）时看起来几乎相同，当em是字体大小的x倍的单位时

2 个答案: