Question

我正在查看的主要网站的CSS有一种在CSS中管理字体大小的奇怪方式。首先，身体选择器具有：

body {
font:62.5%/1.5 Helvetica,Arial,FreeSans,sans-serif;
}

然后稍后获取他们所做的h2字体的自定义大小：

h2 {
font-size:3em;
}

如果更改其中任何一个位置的字体指令，h2的字体大小将会改变并且看起来不正确。所以他们通过这些指令的组合清楚地管理字体大小，我想知道为什么他们会这样做....

问题：

谢谢，约拿

Answer 1

为什么h2字体不仅仅是覆盖正文字体？这就像正文字体作为其大小的乘数......

因为在CSS中，em是一个相对的度量单位。因此，基数为62.5％的3个ems意味着<h2>元素的基本大小的187.5％。

这种设计的动机是什么？

为body元素设置百分比值意味着 - ％也是相对测量单位 - 用户可以使用浏览器的文本大小设置调整整个页面中的文本大小。我猜想像62.5％这样的值是因为浏览器默认字体大小使整个正文副本太大（请记住，这是在body元素上应用的）。我的网站使用90％，这不是那么小但你明白了。

Answer 2

1em等于默认字体大小。浏览器中的默认文本大小为16px。除非您更改默认值，即。

此处默认定义为浏览器默认值的62.5％，行高为1.5。

3em是默认尺寸设置的3倍。

因此，当您更改主体默认值时，它会影响使用em大小单位的每个位置，包括h2标记，默认设置为3倍。

Answer 3

通常，浏览器定义的默认字体大小为16px。然而，它是一个相对单位。例如，如果您设置容器/ div的字体大小

1 em   = 1 times 16px = 16px
1.5 em = 1.5 times 16px = 24px
2 em   = 2 times 16px = 32px

因此，通过将其设置为62.5％，它会将参考字体大小减小到10px默认值。

这意味着当您在px中可视化字体大小时，这种技术会更容易，

1 em = 10px
1.5em = 15px
2em = 20px