标题标签的 CSS 字体大小继承答案

【问题标题】：CSS Font Size Inheritance for Header Tags标题标签的 CSS 字体大小继承
【发布时间】：2014-07-31 22:21:04
【问题描述】：

我有一个带有多个 H3 标题标签的页面，并且想要增加它们的字体大小。在 Firebug 中检查相关样式设置时，唯一的字体大小声明是针对设置为 16px 的周围 div 元素。但是，这个 16px 字体大小设置已被否决，但没有任何其他字体大小声明的引用。标题元素的样式设置不包含字体大小声明。谁能告诉我这里发生了什么？

【问题讨论】：

你能分享代码吗？也许创建一个 jsfiddle？
它已经完成了，它几乎回答了我的问题。

标签： css fonts

【解决方案1】：

浏览器将字体大小应用于标题元素，而在 Firefox（和 Chrome，我想是其他的）中，这是在 em 中设置的。它来自“系统”样式表。从 Firebug 检查器中查看：

每个标题都有不同的字体大小设置：

h1 - 2em
h2 - 1.5em
h3 - 1.17em
h4 - 1em
h5 - 0.83em
h6 - 0.67em

请注意，要查看这些样式，您必须从“样式”下拉列表中选择“显示用户代理”CSS：

所以，你有一个 16px 的父容器（事实上，这就是浏览器的默认字体大小），所以 1.17em 处的 <h3> 将是 1.17 * 16 = 18.72px。

如果您在样式表中将 <h3> 明确设置为 1em，那么它将与父级大小相同。

这个小提琴显示每个标题都受到具有不同字体大小的父容器的影响：

Fiddle

【讨论】：

没问题。如果您对答案感到满意，能否将答案标记为正确？

【解决方案2】：

我不能完全理解你的问题，如果你在这里复制你的代码可能会更好。但我一般来说，对于 div 或 H3 元素，您的代码应该是这样的。

<div class="classZ">some text</div>
<h3>some header</h3>

H3 {
     font-size: 18px;
}

div.classZ {
     font-size: 10px;
}

【讨论】：

好的，谢谢您的回复。我只是不知道标题元素的字体大小是由浏览器设置的，除非您在样式表中设置它们。