Css 请解释这种字体大小结构

我正在查看的一个主要网站的css似乎有一种奇怪的方式来管理css中的字体大小。首先，车身选择器具有以下功能：

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

然后，为了获得h2字体的自定义大小，他们会：

h2 {
font-size:3em;
}

如果在这两个位置中的任何一个位置更改字体指令，h2的字体大小将发生更改，看起来不正确。因此，他们显然是通过这些指令的组合来管理字体大小，我想知道他们为什么会这样做

问题:

为什么h2字体不是简单地凌驾于主体字体之上？这就像主体字体在其大小上起着倍增的作用

这种设计的动机是什么

谢谢， 约拿

为什么h2字体不是简单地凌驾于主体字体之上？这就像主体字体在其大小上起着倍增的作用

因为在CSS中，

em

是一个相对的度量单位。因此，62.5%基本尺寸的3个ems意味着

元件基本尺寸的187.5%

这种设计的动机是什么

---

为

body

元素设置百分比值意味着-%也是一个相对的度量单位-用户可以使用浏览器的文本大小设置调整整个页面中的文本大小。我想，如果浏览器默认字体大小使整个正文副本过大，那么应该使用62.5%这样的值（请记住，这是在

正文

元素上应用的）。我的网站使用了90%，虽然不是很小，但你可以理解。

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

此处，默认值定义为浏览器默认值的62.5%，线条高度为1.5

3em是默认大小集的3倍

---

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

通常浏览器会定义默认字体大小为16px。然而，em是一个相对单位。例如，如果您设置了一个容器/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

---

好吧，这是有道理的，那么为什么要将基本尺寸设为62.5呢？为什么不把base作为base，以后再做1.87em或任何你想要的em呢？@Jonah：这样，我就不必为我所有的标准正文指定我想要的浏览器默认值的62.5%。我可以只做一次，以后再覆盖。这是CSS的一个重要原则：）62.5%相当于将该值设置为10px（在大多数浏览器中默认为16px），但也让用户的本地字体大小设置生效。px应该是一个可扩展的单元，但一些浏览器将其视为屏幕上的绝对像素。我应该补充一点，将基本字体大小设置为10px可以更容易地使用%和em在其他地方设置特定的字体大小——10px在页面上很少实际使用。这很有帮助，但不是问题的答案。问题是1）为什么h2字体不是简单地凌驾于主体字体之上？这种设计的动机是什么？当你将你的字体大小设置为62.5%时，这意味着你现在的字体大小是10px，而不是默认的16px。因此，如果您不指定h2字体大小，它将是10px。让3em覆盖从10px到3（em）*10px=30px的h2字体大小。我希望这能进一步澄清这一点