<body> 字体大小不影响 <h> 标签

Question

我正在尝试 在我的 HTML 项目的每个页面 上加倍字体大小。我这样做了：

body{
  font-size:200% !important;
}

在包含在每个页面中的主 css 文件上，每个标签的结果都很好除了 <h1> 到 <h6>。他们仍然像以前一样。我对这些标签尝试了同样的技巧，

h1, h2, h3, h4, h5, h6{
  font-size:200% !important;
}

这导致这些标签的字体特别大。在我的 inspect 元素 window 中，我可以看到这些标签在我对它们执行此操作之前已被覆盖，并且它们的 font-size 已更改。我的 font-size:200% !important 删除了他们以前的 font-size，现在他们有了标准的字体大小 *2。

我需要将 <h1> 的修改后的字体大小保留为 <h6>，并将其设为双倍 。通过更改每个字体的字体大小来做到这一点效率很低。无论如何强制他们遵守 <body> 字体大小规则？

编辑： 我还发现还有一些其他 classes 没有受到我对 body 标签的规则的影响。例如，带有离子形式消息 class 的 div。现在这变得很奇怪了。 :|

Answer 1

至少在Chrome中，h1等的字体大小定义为2em。因此，它将是对祖先（包括正文）有效的任何字体大小的倍数。

<div style="font-size: 200%; ">
  <h1>This is h1.</h1>
  <h2>This is h2.</h2>
  <p>This is p.</p>
</div>

2em for h1 是建议的推荐默认设置，as per the W3C，所以我希望大多数（如果不是全部）浏览器都遵循它。

如果由于某种原因这不起作用，您可以尝试使用 rem 定义 h1 等的大小，它指的是 html 元素上的字体大小, 但您必须单独设置它们。

on the main css file which is included in every single page, and the result was good on every tag except <h1> to <h6>.

那是什么浏览器？某些浏览器可能会在用户代理样式表中定义 h1 等的字体大小而不使用 em，但这会让我感到惊讶。

Answer 2

From the MDN: these elements have a rank given by the number in their name

这意味着您不能始终为每个元素使用 200%，而是使用不同的值，例如：

h1 { font-size: 400%;}  /* The chrome def value: 2em */
h2 { font-size: 300%;}  /* The chrome def value: 1.5em */
h3 { font-size: 234%;}  /* The chrome def value: 1.17em */
h4 { font-size: 200%;}  /* The chrome def value: 1em */
h5 { font-size: 166%;}  /* The chrome def value: 0.83em */
h6 { font-size: 134%;}  /* The chrome def value: 0.67em */

<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>

<body> 字体大小不影响 <h> 标签

<body> font size doesn't affect <h> tags

html

css

sass

font-size