Question

经过一些研究和谷歌搜索，我找不到一个明确的答案，所以我想在这里问。

最好添加font-family？到html或body元素？

修改的我很抱歉，有些人认为我的意思是内联，这不是我的意思。

让我们这样做，这是最好/首选的方式：或

html{
    font-family: sans-serif;
}

或

body{
    font-family: sans-serif;
}

的问候，

Answer 1

* 选择器将为您提供更好的覆盖范围。例如，form 元素（如 input）不会从 html 和 body 标签继承字体样式。但是如果您使用 * 设置它，那么您将确保您的字体样式传递给所有 HTML 元素。

* {
  font-family: 'Open Sans', Helvetica, sans-serif;
}

这是一个演示。使用与 * selector。

Answer 2

最佳做法是在font-family中设置body。

body {
   font-family: Arial !important;
}

此处!important非常有用，以便在您使用任何其他框架时，font-family不会被覆盖。

您也可以使用*选择器。

* {
    font-family: Arial !important;
}

* - 选择器意味着任何/所有元素，但在覆盖更具体的选择器时，显然会位于属性链的底部。

请注意!important标志会将*的字体样式呈现为绝对字体，即使其他选择器已用于设置文本（例如body或也许是p）。

Answer 3

简短的回答是，您可以使用任何一种。由于每个显示的元素都是 body 元素的后代，而 body 元素本身是 html 元素的子元素，因此所有继承 font-family 属性的元素都会很高兴从两者中采用它。（如果特定元素没有继承它，您始终可以使用值 font-family 覆盖其 inherit 属性。）

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

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

下一个问题：浏览器在哪里定义像 font-family 这样的文本格式属性？我查看了 body element、Safari (WebKit) 和 Mozilla Firefox 的用户代理样式表，还在没有覆盖 CSS 的页面上使用了 Web Inspector，但我找不到全局 {{ 1}} 在任何地方声明。但这里有一些有趣的事情……在 Safari 中，全局文本 font-family 属性是在 color 元素上定义的。所以，如果有任何事情要做，它表明 WebKit 浏览器确实在 html 元素上定义了全局字体属性。

这里也有 CSS 重置可以解决这个问题，比如 Bootstrap 的 html 文件：

_reboot.scss

不过，我们可以在 // 2. Change the default font family in all browsers. html { font-family: sans-serif; // 2 … } 元素上覆盖它，这正是 Bootstrap 几行之后所做的：

body

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

CSS 规范（据我所知）没有规定 html 在哪里声明（它适用于“所有元素”），但它确实给了我们一些提示。 W3C 文档 Chrome 中的第一个代码示例是这样的：

font-family

另一个是CSS Fonts Module Level 3：

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

说明：

<块引用>

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

另一个指向 body { font-family: "Gill Sans", sans-serif; font-size: 12pt; margin: 3em; } 的点。

最终成绩：

body：2
body：0.5

获胜者：html！ :-D

Answer 4

向<body>标记添加样式的最佳方式。因为它包含层次结构，所以它必须包含所有全局样式。

参考：https://css-tricks.com/html-vs-body-in-css/

Answer 5

根据项目的不同，最佳位置是包含所有css代码的单独链接样式页面。但是从你的问题来看，听起来好像你想把它写进你的HTML。

如果你想在与HTML相同的文件中进行，那么内部样式表是第二个最佳选择，并在“head”标签中放置“style”标签，并在“样式标签”中编写CSS

<head>
  <style>
    <!–– Insert CSS Code Here -->
  </style>
</head>

否则你只需将其写入内联（在您尝试设置元素的位置）。

现在最好的方法取决于项目，但通常认为外部样式表是第一个选项，因为它可以让其他人轻松跟随哪些元素受到样式的影响。如果它是一个没有太多CSS的小项目，那么“内部样式表是下一个最佳选择，同样是为了提高可读性并将CSS保存在一个地方。尽管可能的内联样式并不是真的鼓励。

Answer 6

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

*选择器，这个选择所有元素：

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

Answer 7

如果您正在尝试更改整个页面的字体系列，我将不得不同意user7357089和nashcheez，即＃34; best＆＃34;方法是将它放在body标签中。无论如何，所有可见的HTML都将包含在body标签中，将其添加到HTML中是不必要的。

Answer 8

要为您的网站更改字体系列，您可以使用此：

*{
   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;
}

Answer 9

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

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

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

在哪里设置字体系列，正文或html元素？

9 个答案: