将字体大小添加到 HTML 会覆盖我所有的字体大小答案

【问题标题】：Adding font-size to HTML overrides all my font-sizes将字体大小添加到 HTML 会覆盖我所有的字体大小
【发布时间】：2018-08-02 08:00:32
【问题描述】：

如果我在 html 中添加字体大小，我的字体会出现奇怪的行为

 html {
            font-size: 10px;
        }

它将覆盖我在所有 html 标记上的所有字体大小，并使它们变小

我想在 html 上保留字体大小，但我有一个 div，我不会受到 html 字体大小的影响

这里是一个例子

尝试从 CSS 中删除 html 并尝试

我想保留 html 的字体大小，但我有一个 div，我不希望它受到 html 字体大小的影响

如您在示例中看到的那样

希望你能帮忙

【问题讨论】：

他们称之为层叠样式表是有原因的。无论如何，当您就 SO 提出问题时，要求在您的问题中发布minimal reproducible example，而不是 jsfiddle。

【解决方案1】：

这是因为您使用 rem 作为字体大小。 rem 和 em 应该以这种方式工作。检查https://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/

如果您不希望评分受到影响，请改用 px。

【讨论】：

【解决方案2】：

您所做的是在该 html 字体规则之后添加一个规则，然后为该 div 创建一个 ID，并将字体大小设置为任意值：

html {
    font-size: 10px;
}

div#fontSize {
    font-size: 14px; /*Or whatever size you want*/
}

如果您想让 div 元素的字体大小与默认值相同，则只需将其设置为1em，如下所示：

div#fontSize {
    font-size: 1em; /*Sets this size to 16px, which is default*/
}

简单！只需询问您是否需要任何帮助/解释/小提琴。

【讨论】：

请注意，em 的大小与元素的直接或最近的父元素相关。如果 OP 将 div 设置为 font-size: 1em，它将导致 10px，因为为 html 设置的 font-size OP 被示例中的其他元素继承。