即使设置为全局，网站也会显示不同的字体大小

Question

我在两个站点上设置了字体

* {
    font-family: "Varela Round", sans-serif;
}

由于未指定font-size，因此浏览器对每个元素使用其标准值。但是，如果我将尺寸设置为0.9em，则尺寸确实很小。 window.getComputedStyle(element).fontSize的输出还显示了不同的px值。如果我设置font-size: 13px的大小到处都是相同的。

Answer 1

  

但是，如果我将大小设置为0.9em，则该大小确实很小。

是的，这是一个相对大小。

body变成html字体大小的90％。

section内的body成为body的90％（所以html的81％）。

p内的section成为section的90％（所以html的72.9％）

以此类推。

  

如果我设置font-size：13px，则到处都是相同的大小。

绝对单位不会根据父元素的字体大小而变化。

Answer 2

此说明摘自Css Font Size网站

这样做的原因是px与其他元素无关。 %和em相对于其父项是相对的，这导致以下效果： 由于100% = 1em，几乎可以类似地使用两个单元（请参阅% vs em）。

一种解决方案是使用rem，其作用与em类似，但不固有来自父级的值。 另一种是为主要元素设置默认大小，例如body，然后为所有元素设置相对于父级的字体大小。