标题标签的CSS字体大小继承 [英] CSS Font Size Inheritance for Header Tags

问题描述

我有一个带有几个H3标题标签的页面，并希望增加它们的字体大小。在Firebug中检查相关的样式设置时，唯一的字体大小声明是针对周围div元素设置为16px的。但是，这个16px的字体大小设置已被否决，但没有任何其他字体大小的声明参考。标题元素的样式设置不包含字体大小声明。
谁能告诉我这里发生了什么事？浏览器应用字体大小的标题元素和Firefox（和铬，我假设其他人）这是设置在（＃）（＃）（＃） EM 。它来自系统样式表。从Firebug检查器中看到：

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

• h1 - 2em


• h2 - 1.5em


• h3 - 1.17em


• h4 - 1em


• h5 - 0.83em
  h6 - 0.67em
  

请注意，要查看这些样式，您必须从样式下拉列表中选择显示用户代理CSS： https://i.stack.imgur.com/5ramq.pngalt =

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

如果您明确地将您的< h3> 设置为 1em 样式表，那么它将和父类一样大。

这个小提琴显示每个头受到不同字号的父容器的影响： nofollow noreferrer>小提琴

I have a page with several H3 header tags and want to increase their font size. When checking the relevant style settings in Firebug the only font size declaration is for the surrounding div element which is set to 16px. However, this 16px font size setting has been overruled but there is no reference anywhere to any other font size declaration. The style settings for the header elements contain no font size declarations. Can anyone tell me what's going on here?

解决方案

The browser applies font-sizes to header elements and in Firefox (and Chrome and I presume the others) this is set in em. It comes from a 'system' stylesheet. See this from the Firebug inspector:

Each header has a different font-size set:

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

Note that to see these styles you have to select 'show user agent' CSS from the 'styles' dropdown:

So, you have a parent container at 16px (in fact, that is the browser default font-size anyway), so the <h3> at 1.17em would be 1.17 * 16 = 18.72px.

If you explicitly set your <h3> to be 1em in your stylesheet then it would be the same size as the parent.

This fiddle shows each header being affected by a parent container with different font-sizes:

Fiddle

这篇关于标题标签的CSS字体大小继承的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！