logo标签列表

在哪里设置font-family: body或html元素？

htmlcss
42

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

html {
    font-family: sans-serif;
}
或者
body {
    font-family: sans-serif;
}

我在网上搜索过，但是找不到一个确定的答案。

我建议创建一个 CSS 类属性，并在其中应用它。使用： - Sorangwala Abbasali
font-family是CSS属性，因此它既不属于html标签也不属于body标签。 - Bastian Voigt
1
请查看以下链接以了解详情：https://dev59.com/N2w15IYBdhLWcg3wO5WX 和 https://dev59.com/cGw05IYBdhLWcg3whCNn。 - shubham agrawal
1
如果您正在使用 rem 单位，请确保在 html 元素上设置基础字体大小。rem 单位是基于根元素即 html 元素的字体大小。 - Gavin
10个回答
26
简短的回答是，你可以使用任何一个。由于每个显示元素都是body元素的后代，而body元素本身是html元素的子元素，因此继承font-family属性的所有元素都可以从任何一个元素中愉快地采用它。（如果特定元素没有继承它，您总是可以用值inherit覆盖它的font-family属性。）
但是最佳实践是什么，为什么呢？这有点难以回答，但我会尝试一下。让我们从语义学开始... html元素表示整个文档（包括不可见的元数据），而body元素表示文档的内容。由于font-family是样式化内容的属性，将其应用于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;
}

另一个在这里：
body {
   font-family: "Gill Sans", sans-serif;
   font-size: 12pt;
   margin: 3em;
}

它解释道：

在BODY元素上的第一个声明将字体族设置为“Gill Sans”。如果该字体不可用，用户代理（通常称为“浏览器”）将使用sans-serif字体族，这是五个通用字体族之一，所有用户代理都知道。 BODY的子元素将继承font-family属性的值。

另一个点要注意：body。
最终得分：

body: 2
html: 0.5

获胜者：body！ :-D
10
最佳实践是在中设置font-family。
body {
   font-family: Arial !important;
}
!important 在这里非常有用，因为如果您正在使用其他框架，则可以防止 font-family 被覆盖。
您也可以使用 * 选择器。
* {
    font-family: Arial !important;
}
< p > *选择器表示任何/所有元素，但显然在覆盖更具体的选择器时将位于属性链底部。

请注意，！important标志将使*的字体样式绝对化，即使已使用其他选择器设置文本（例如body或可能是p）。

你说要将它设置在主体中，但是你的示例将其设置为<html>。 - Rob
10
为什么这是最佳实践？能否详细阐述或提供参考来源？ - Bjørnar Hagen
2
在我看来，人们对通用选择器 (*) 使用过度了。它是一种低效的选择器，可以选择每一个元素。（级联存在的目的就是为了避免这种情况。）如果再加上 !important，那就是罪上加罪了。 - Kal
5
*选择器可以覆盖更多的元素。例如，像input这样的form元素不会从html和body标签中继承字体样式。但是如果你使用*设置，则可以确保你的字体样式传递到所有HTML元素中。
* {
  font-family: 'Open Sans', Helvetica, sans-serif;
}

这里有一个演示，使用*选择器和html和body元素进行比较。

这正是我认为这种方法最好的原因。现在的问题是，它是否会覆盖嵌入式iframe的字体系列？ - Victor Eke
0
你对使用<body>的解释毫无意义。"它包含了层次结构"是什么意思？不过，CSS-Tricks的文章不错。 - Kal
0
如果您想要更改整个页面的字体族，我会同意 user7357089 和 nashcheez 的看法，即最好的方法是将其放置在 body 标签中。毕竟，所有可见的 HTML 都包含在 body 标签内，将其添加到 HTML 中是不必要的。
0

正如其他人所说，指定font-family在body上可能是有意义的。然而，由于将其应用于html元素并没有太多的不利影响，我认为值得提及的是:root伪类选择器，在这种情况下可能更方便，它选择页面的根元素（在大多数情况下是html元素）。

通常，:root选择器用于设置CSS自定义属性（变量）和字体大小，但我认为在它上面应用font-family也是合理的。

:root {
  /* ...custom properties, font-size, etc... */
  font-family: sans-serif;
}
0

我知道大多数人会在 body 元素上设置字体系列。但由于没有对错之分（所有元素都是 html 和 body 元素的子元素），所以选择其中一个并坚持使用它。这适用于您所做的所有编程选择。这将使调试工作变得更加容易。

1
目前你的回答写得不够清晰，请[编辑]以添加更多细节，帮助其他人了解这如何回答问题。你可以在帮助中心找到更多撰写良好答案的信息。 - Community
0
根据项目的不同，最好的地方是一个单独链接的样式页面，其中包含所有的CSS代码。但从你的问题中看来，你想把它写进你的HTML中。
如果你想在与HTML相同的文件中完成它，那么内部样式表是第二好的选择，将"style"标签放在"head"标签中，并在"style"标签中编写你的CSS。
<head>
  <style>
    <!–– Insert CSS Code Here -->
  </style>
</head>

否则，您只需在要样式化的元素处内联编写它。
现在，最佳方法取决于项目，但通常认为外部样式表是第一选择，因为它使其他人能够轻松地跟随哪些元素受到什么样式的影响。如果这是一个没有太多CSS的小项目，则“内部样式表”是下一个最佳选项，同样是为了可读性和将CSS保存在一个位置。虽然可以使用内联样式，但并不鼓励这样做。
谢谢您的回答，我已经更新了我的问题，因为之前表述不够清晰。 - Frank Underwood
0

我假设您的网站上只有一个字体系列，最好的方法是使用

*选择器，它可以选择所有元素：

*{
   font-family:"your-font-family";
}
-4

如果您想更改网站的字体族，请使用以下代码：

*{
   font-family:"your-font-family";
}

或者这样：

html, body, div, span, applet, object, iframe, table, caption, tbody, tfoot, thead, tr, th, td,
del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend {
  font-family: iransans !important;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接