html - 在哪里设置字体系列 : body or html element?

Question

在哪里声明 font-family CSS 属性最好？在 html 或 body 元素上？

html {
    font-family: sans-serif;
}

或

body {
    font-family: sans-serif;
}

我在网上搜索过，但找不到明确的答案。

Answer 1

简短的回答是，您可以使用其中任何一个。由于每个显示的元素都是 body 元素的后代，而 body 元素本身是 html 元素的子元素，所有继承的元素font-family 属性将很乐意从任何一个中采用它。 (如果特定元素不继承它，您始终可以使用 inherit 的值覆盖其 font-family 属性。)

但什么是最佳实践，为什么？这有点难回答，但我会去的。让我们从语义开始……

html element代表整个文档(包括不可见的元数据)，而 body element代表文档的内容。由于 font-family 是样式化 content 的属性，因此将其应用于 body 似乎合乎逻辑。这是 body 的一分。

下一个问题:浏览器在哪里定义文本格式属性，如 font-family？我查看了 Safari (WebKit) 的用户代理样式表, Mozilla Firefox和 Chrome ，并且还在没有覆盖 CSS 的页面上使用了 Web Inspector，但我无法在任何地方找到全局 font-family 声明。但这里有一些有趣的东西……在 Safari 中，全局文本 color 属性是在 html 元素上定义的。所以，如果有什么可以引用的话，它表明 WebKit 浏览器确实在 html 元素上定义了全局字体属性。

CSS 重置也可以解决这个问题，比如 Bootstrap 的 _reboot.scss 文件:

// 2. Change the default font family in all browsers.
html {
   font-family: sans-serif; // 2
   …
}

不过，我们可以在 body 元素上覆盖它，而这正是 Bootstrap 在几行之后所做的:

body {
   margin: 0; // 1
   font-family: $font-family-base;
   …
}

html 半分？

CSS 规范(据我所知)并未规定 font-family 的声明位置(它适用于“所有元素”)，但它确实给了我们一些提示。 W3C 文档中的第一个代码示例 CSS Fonts Module Level 3这是:

body {
   font-family: Helvetica;
   font-weight: bold;
}

另一个是here :

body {
   font-family: "Gill Sans", sans-serif;
   font-size: 12pt;
   margin: 3em;
}

它解释说:

The first declaration on the BODY element sets the font family to "Gill Sans". If that font is not available, the user agent (often referred to as a "browser") will use the sans-serif font family which is one of five generic font families which all users agents know. Child elements of BODY will inherit the value of the font-family property.

再指向body。

最终成绩:

正文:2
html:0.5

获胜者:body! :-D