设置body标签的字体大小答案

【问题标题】：Setting the font-size of a body tag设置body标签的字体大小
【发布时间】：2019-01-15 15:58:01
【问题描述】：

我一直在尝试配置一个基本的 CSS 模板，我可以使用它来开始使用 REM。我看到了设置以下body { font-size: 62.5% }; 的方法，以便数学更容易（1rem = 10px，因为 16px 是默认字体大小）。

我不确定我是否喜欢这种方式，因为如果 10px 的字体大小不是我的基线，则必须指定 <h1>-<h6> 和 <p> 标签的大小。

我一直在尝试一些不同的方法，并且对px 和% 在字体大小方面的关系感到非常困惑。举个例子：

<html>

<body>

  <header>
    <h1>Testing h1</h1>
    <h2>Testing h2</h2>
  </header>

  <main>
    <p>Random paragraph</p>
  </main>
</body>

</html>

考虑以下css：

body {
 font-size: 100%;
}

我希望浏览器以默认大小呈现字体，即 16 像素。 <p> 标记中的任何内容仍为 16 像素，但 <h1> - <h6> 恢复为浏览器样式表中指定的原始大小。为什么不是所有文本都设置为 16 像素？

另一个例子：

body {
  font-size: 12px;
}

为什么<h1>-<h6> 不采用12px 的字体大小？ <h1>-<h6> 确实变小了（12/16 = 0.75 时减少了 75%）。我希望 h1 为 12px 或保持相同的默认值，因为在用户代理样式表中为 h1-h6 指定的值更具体。

这些规则在指定百分比方面是如何工作的？设置样式表以便可以使用 REM 的最佳做法是什么？

【问题讨论】：

你为什么不先使用Normalize CSS
我应该指出我确实使用 normalize.css。我不明白这会对任何事情产生影响吗？ Normalize.css 对我所看到的字体大小没有任何作用。

标签： html css

【解决方案1】：

它在我这边工作得很好。唯一的可能是，您的 HTML 中缺少指向 css 文件的链接... :) 否则，为了确保，请尝试对同一属性使用内联样式。

【讨论】：

【解决方案2】：

为什么<h1>-<h6> 不采用这个 12px 的字体大小？

<h1> 和相关元素在您更改其祖先的字体大小时不会将其字体大小更改为与其祖先相同，因为它们的默认字体大小（在浏览器内置的样式表中）未设置为 @ 987654323@、1em、inherit 或类似名称，并且您没有指定不同的字体大小来覆盖浏览器提供的字体大小。

<h1>-<h6> 确实变小了（12/16 = 0.75 时减小了 75%）。我希望 h1 为 12px 或保持相同的默认值，因为在用户代理样式表中为 h1-h6 指定的值更具体。

浏览器样式表中指定的值（至少在我的浏览器中）使用em 单位，因此它与父元素。

这些规则在指定百分比方面是如何工作的？

您为祖先元素（px、% 或其他任何东西）的字体大小选择的单位是无关紧要的。

【讨论】：

感谢您的回复。您说“......并且您没有指定不同的字体大小来覆盖浏览器提供的字体大小。”我认为由于样式表是级联的，body 标签会覆盖默认的浏览器样式表（甚至是h 标签）。但是，我想我在这里错过了优先权。我说这不是正确的，因为在浏览器样式表中，h1 属性是比body 更具体的选择器，并且特异性优先于稍后出现的不太具体的规则？
@ftahir 这不是关于特异性，而是继承......因为在 h1 中指定了一个值，而不是使用这个值，除非有更具体的选择器来覆盖它（并且 body 不是一个其中！因为它没有选择 h1) 但是如果没有指定值，那么您将继承父元素的值，即 body
"我认为 body 标签会覆盖默认的浏览器样式表（甚至是 h 标签），因为样式表是级联的。 — 当多个冲突规则应用于同一元素时，级联处理规则的应用顺序。以body 为目标的规则根本不以h1 为目标，因此级联不相关。
“h1 属性是比 body 更具体的选择器”——h1 和 body 同样具体。您根本没有为h1 指定规则。
啊哈好吧，现在关于级联更有意义。因此，对于body 的font-size:12px;，h1 实际上并没有受到显式的影响，而是因为它是由关系值（em）定义的，那么如果body' s 字体大小发生变化，那么h1 也会发生变化，因为body 是具有已定义字体大小的最接近的祖先？如果这是正确的，那么我想我明白了。

【解决方案3】：

h1 的默认 font-size 设置为 2em，这意味着 2 x the font size of the parent element。与其他标题相同，它们都有一个使用em 单位指定的font-size。

使用百分比与font-size 也是相对于父font-size 并表示p x the font size of the parent element 其中p 是介于0（0%）和1（100%）之间的值。

因此，如果您在正文中指定100%，则正文将具有16px（默认font-size），而h1 将具有32px。

^{您可以使用相同的逻辑来查找其他标题的font-size。}

body {
  font-size:100%;
}

&lt;h1&gt;this a text&lt;/h1&gt;

如果您在正文中指定12px，则h1 将具有24px

body {
  font-size:12px;
}

&lt;h1&gt;this a text&lt;/h1&gt;

并且指定62.5% 将使主体具有10px 和h1 20px

body {
  font-size:62.5%;
}

&lt;h1&gt;this a text&lt;/h1&gt;

由于p 没有font-size 的默认值，它只会继承正文中指定的值。

您可以使用开发工具轻松检查计算选项卡中的这些值：

来自documenation：

em 值的大小是动态的。定义字体大小时属性，一个 em 等于应用到的字体大小 相关元素的父级。如果你没有设置字体大小页面上的任何位置，则它是浏览器默认值，这通常是 16像素

百分比：

一个正的<percentage> 值，相对于父元素的字体大小。

【讨论】：

这是一个如此详细的答案，非常感谢，特别指出h1-h6的默认值。在处理 REM 时，我设置基线的方式是让 body 标签的字体大小为 100%，为了响应性，我设置了一些断点，其中字体大小更改为 75% 和 60%在max-width: 768px 和max-width: 410px；分别。这是一个好方法吗？
@ftahir 好坏可能是基于意见的......如果它工作正常并且它们没有冲突，那么它很好，但如果你有一些问题，那么你可能应该重新考虑它......简单注意不要使用非常小的字体大小，我认为我们应该避免小于 14px，因为它可能对某些人来说很难阅读

【解决方案4】：

`rem` 相对于`HTML`，而不是`BODY`

rem 单位基于HTML 元素的字体大小，而不是BODY 元素。所以你应该这样设置基本字体大小：

HTML {font-size: 62.5%; } /* Now `rem` is equivalent to `10px` */

而不是

BODY {font-size: 62.5%; } /* Does NOT affect `rem` */

HTML 字体大小可能会影响滚动速度

请注意，至少在某些浏览器中，HTML 元素的字体大小会影响滚轮滚动步长：HTML 元素的字体大小越小，步长越小，滚动越慢是。

重置所有元素的字体大小

要重置所有元素的字体大小，可以使用通用选择器：

* {font-size: 100%; }

或：

* {font-size: 1em; }

适当的`DOCTYPE` 以实现跨浏览器的一致性

此外，请确保您在 HTML 文档的开头有正确的 DOCTYPE 声明，以便为文档打开标准合规模式，以实现一致的跨浏览器呈现和行为：

<!DOCTYPE html>

【讨论】：

rem 相对于HTML，而不是BODY

HTML 字体大小可能会影响滚动速度

重置所有元素的字体大小

适当的DOCTYPE 以实现跨浏览器的一致性

`rem` 相对于`HTML`，而不是`BODY`

适当的`DOCTYPE` 以实现跨浏览器的一致性