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

【问题标题】：<body> font size doesn't affect <h> tags<body> 字体大小不影响 <h> 标签
【发布时间】：2017-12-05 06:47:06
【问题描述】：

我正在尝试将我的 HTML 项目的每一页上的字体加倍。我这样做了：

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

在每个页面中包含的主 css 文件上，每个标签 except <h1> 到 <h6> 的结果都很好。他们保持着从前的样子。我对这些标签尝试了同样的技巧，

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

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

我需要将 <h1> 的修改后的字体大小保留为 <h6>，并将其加倍。通过更改每个字体的字体大小来做到这一点是低效的。有没有强制他们遵守<body> font-size 规则？

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

【问题讨论】：

也许通过将您想要更改的文本放在不同的
中并给它一个类并在您的 css 文件中调用该类？
html 文件受保护；在 chrome 检查元素工具中，我尝试将“font-size:200% !important”添加到外部 div。结果和我上面提到的一样。
为我工作jsfiddle.net/zkL08a14
@Svenmarim 也是，我说的是一百页的网络应用程序，不幸的是我不能手动更改每一个。我会……乏味的。 :D
@Mr.Alien 正如我所提到的，我的
到
确实变大了。问题是，例如，h1 被定义为 font-size: 25px。当 font-size:200% !important 被分配给它时，它会回到它的默认字体大小，然后变成两倍。我需要它加倍“25px”。

标签： html css sass font-size

【解决方案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 元素上的字体大小，但您必须设置它们个人。

在每个页面中包含的主css文件上，除了<h1>到<h6>之外，每个标签的结果都很好。

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

【讨论】：

我正在编辑一个 Android 应用程序 UI。我正在使用 chrome://inspect 来监控我对其应用的更改。
另外，我尝试使用 rem 定义 h1 到 h6 字体大小，但它们没有改变。我在我的“输入”字段上使用了它，我刚刚意识到我的规则没有将其更改为正文标记，并且它们变得如此之大以至于发生了溢出。我期待像 20 像素这样的东西，我得到了 48 像素。
rem 是基于 html 元素的字体大小，所以如果你要使用rem，请确保输入你的@987654337 @ 在html 元素上。
一个问题。基本上，如果我在我的上使用 font-size: 200% 并将其他所有人的字体属性设置为 1rem，那么每个人的字体大小都会加倍？
这个以某种方式解决了这个问题。我为每个标签添加了 1em，他们遵循了规则。谢谢！

【解决方案2】：

来自 MDN：这些元素的排名由其名称中的数字给出

这意味着您不能总是对每个元素使用 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>

【讨论】：

我不确定，但如果它们有默认值，我认为通过在所有这些上使用 font-size:200% 我会得到 4 em,3 em,2.34 em,2 em ,1.66 厘米和 1.34 厘米。我不明白为什么我应该为每个人使用不同的百分比。
@SarahAmini 如果您看到 h4 标签，您会看到 1 而 h1 是 2。这意味着：h1 是 h4 的两倍。并且因为 h4 具有默认字体大小，并且因为 h1,h2... 元素必须根据排名具有不同的大小......你有不同的百分比。
我明白了。所以最后你建议我必须单独对每个标签应用更改？
@SarahAmini 是的，你需要尊重他们之间的比例。例如，如果 h4 是 1em 而 h1 是 2em：这意味着 h1 是 h4 的双倍......所以如果你将 h4 设置为 200%，这意味着 h1 必须设置为 400%。我希望这能帮到您。告诉我

到

确实变大了。问题是，例如，h1 被定义为 font-size: 25px。当 font-size:200% !important 被分配给它时，它会回到它的默认字体大小，然后变成两倍。我需要它加倍“25px”。