【问题标题】：Same font size for h1 and h2 in article文章中 h1 和 h2 的字体大小相同
【发布时间】：2016-09-17 13:32:24
【问题描述】：

问题：

为什么将<h1> 和<h2> 标签放在<article> 中时具有相同的font-size？

输出：

然后我想也许只是我的眼睛欺骗了我所以我测量了它。

我原来是一样大的。

我查看了以下链接 (http://w3c.github.io/html/rendering.html#sections-and-headings) 我了解到它是基于层次结构的，但 <h1> 和 <h2> 处于同一层次结构。

因此，<h1> 应该是 2em，<h2> 应该是 1.5em。

代码：

<!DOCTYPE html>
<html>
    <head>
        <title>Headings</title>
        <meta charset="utf-8">
    </head>
    <body>
        <article>
            <h1>This is h1.</h1>
            <h2>This is h2.</h2>
            <h3>This is h3.</h3>
            <h4>This is h4.</h4>
            <h5>This is h5.</h5>
            <h6>This is h6.</h6>
        </article>
    </body>
</html>

【问题讨论】：

您可以在浏览器的控制台中查看“计算样式”，而不是测量字母。
@Lends 很好的建议，谢谢。
specs you linked 表示 x h1 的字体大小应为 1.5 em，x hgroup > h1 ~ h2 的字体大小应为 1.17 em（其中 x 是 <article>，@ 987654340@、<nav> 和 <section>。我认为浏览器只实现了 h1-in-article 部分而不是 h2-in-article 部分（+其余部分），这就是它们的大小相同的原因在<article>

标签： css html html-heading

【解决方案1】：

这是一个错误吗？

不，这是大多数浏览器（包括 Edge、Internet Explorer、Opera、Chrome 和 Firefox）所遵循的预期行为。

为了在一定程度上确认这一点，有一个关于 Firefox 的行为的错误报告已被关闭，状态为 Wontfix，可能是由于以下原因：

长话短说：我建议将此问题的状态更改为 wontfix，因为它符合更复杂的 html5 标准之一。

https://bugzilla.mozilla.org/show_bug.cgi?id=1424001

为什么会这样？

最初浏览器可能会遵守以下 W3C 指南：

节可以包含任何等级的标题，但强烈建议作者要么仅使用 h1 元素，要么使用适当等级的元素用于节的嵌套级别。

还鼓励作者在分节内容的元素中显式包装分节，而不是依赖在分节内容的一个元素中包含多个标题所生成的隐式分节。

https://www.w3.org/TR/2011/WD-html5-author-20110809/headings-and-sections.html

以下示例与本指南一起提供，所有这些示例在（当时）都是有效的：

示例 1

<h4>Apples</h4>
<p>Apples are fruit.</p>
<section>
  <h2>Taste</h2>
  <p>They taste lovely.</p>
  <h6>Sweet</h6>
  <p>Red apples are sweeter than green ones.</p>
  <h1>Color</h1>
  <p>Apples come in various colors.</p>
</section>

这是最不理想的版本，因为标记很难确定哪个标题应该最突出，而且它没有遵循上述指南。

示例 2

<h1>Apples</h1>
<p>Apples are fruit.</p>
<section>
  <h2>Taste</h2>
  <p>They taste lovely.</p>
  <section>
    <h3>Sweet</h3>
    <p>Red apples are sweeter than green ones.</p>
  </section>
</section>
<section>
  <h2>Color</h2>
  <p>Apples come in various colors.</p>
</section>

此版本使查看标题层次结构变得更加容易，并遵循这两个指导点。

示例 3

<h1>Apples</h1>
<p>Apples are fruit.</p>
<section>
  <h1>Taste</h1>
  <p>They taste lovely.</p>
  <section>
    <h1>Sweet</h1>
    <p>Red apples are sweeter than green ones.</p>
  </section>
</section>
<section>
  <h1>Color</h1>
  <p>Apples come in various colors.</p>
</section>

此版本还可以更轻松地查看标题层次结构并遵循两个指导点。

您应该注意到，尽管使用不同的标题元素，example 2 和 example 3 看起来都一样，这是因为这两个示例都遵循指导，同样有效并传达相同的标题层次结构。

然而

在最近的草稿中，关于如何对内容进行标题分段的指南发生了变化：

节可能包含与其节嵌套级别相同的标题。作者应该为章节的嵌套级别使用适当等级的标题。

https://www.w3.org/TR/html53/sections.html#headings-and-sections

本指南表明上面提供的示例示例 2 是标记数据的正确方法。

鉴于此，这似乎是合乎逻辑的：

根据原始指南实施此功能
新的指导建议 h1 元素将不适合在分段内容中设置标题，因为它们将设置在分段根中，但是，在使用它的情况下，它将被设置为适合标题匹配嵌套级别

分段内容元素始终被视为其最近祖先分段根或分段内容的最近祖先元素的子分段

https://www.w3.org/TR/html53/sections.html#headings-and-sections

总结

这是预期的行为，因为当标题嵌套在 article 和 section 等分段内容中时，最初有多种方式来传达标题层次结构。现在使用相同的规则来确保标题反映嵌套部分的适当等级。

【讨论】：

为什么要引用一个 7 年前的 W3C 草案文档，其中的指导与最近的 W3C 建议相矛盾？
@Alochi，我检查了最近的文档，你是对的，我已经更新了我的答案以反映这一点。
@HiddenHobbes 你提到<h1> 元素永远不适合分割内容。您能否指出指导方针中规定这一点的具体内容？此外，如果此指导属实，那么在此示例中如何避免
元素：jsfiddle.net/uz3wqobe?
在以下行中推断“分段内容元素始终被视为其最近祖先分段根或分段内容的最近祖先元素的子分段”；如果它们总是小节，则暗示分节根将包含主标题。规范中的示例似乎反映了这一点，但是，我可能过于从字面上理解这一点并且我的解释是不正确的。
这是一个很好的答案。此外，当作者开始对内容进行分段时，他们会在章节、文章等中使用 h2 元素作为顶级标题，以表明这些排名低于 h1，是正文的直接子级。如果 W3C 可以，我认为他们希望神奇地将每个顶级标题从 h2 更改为 h1，并让浏览器使用嵌套结构来决定标题排名。这就是他们对原始记录的期望。更多webucator.com/blog/2019/08/…

【解决方案2】：

这是设计使然，<h1> 标签的行为是这样的随着结构将变得更深，即<article> inside <article> inside <article> 然后每个级别的大小都会减小。

下面是演示：

<!DOCTYPE html>
<html>

<head>
  <title>Headings</title>
  <meta charset="utf-8">
</head>

<body>
  <span>Default</span>
  <h1>This is h1.</h1>
  <h2>This is h2.</h2>
  <h3>This is h3.</h3>
  <h4>This is h4.</h4>
  <h5>This is h5.</h5>
  <h6>This is h6.</h6>
  <hr>
  <article>
    <span>One level inside article tag</span>

    <h1>This is h1.</h1>
    <h2>This is h2.</h2>
    <h3>This is h3.</h3>
    <h4>This is h4.</h4>
    <h5>This is h5.</h5>
    <h6>This is h6.</h6>
    <hr>
    <article>
      <span>Two level inside article tag</span>

      <h1>This is h1.</h1>
      <h2>This is h2.</h2>
      <h3>This is h3.</h3>
      <h4>This is h4.</h4>
      <h5>This is h5.</h5>
      <h6>This is h6.</h6>
      <hr>
      <article>
        <span>Three level inside article tag</span>

        <h1>This is h1.</h1>
        <h2>This is h2.</h2>
        <h3>This is h3.</h3>
        <h4>This is h4.</h4>
        <h5>This is h5.</h5>
        <h6>This is h6.</h6>
        <hr>
      </article>
    </article>

  </article>
</body>

</html>

来源：

参考可以查看this官方信息。

这个官方信息说：

在以下 CSS 块中，x 是以下选择器的简写： :matches(文章, 旁边, 导航, 部分)

x h1 { margin-block-start: 0.83em; margin-block-end: 0.83em; font-size: 1.50em; }
x x h1 { margin-block-start: 1.00em; margin-block-end: 1.00em; font-size: 1.17em; }
x x x h1 { margin-block-start: 1.33em; margin-block-end: 1.33em; font-size: 1.00em; }
x x x x h1 { margin-block-start: 1.67em; margin-block-end: 1.67em; font-size: 0.83em; }
x x x x x h1 { margin-block-start: 2.33em; margin-block-end: 2.33em; font-size: 0.67em; }

为什么 h1 和 h2 相同？

这是设计使然，因为浏览器制造商认为/同意，在网络编辑、生产者和开发人员之下，<h2> 通常被视为视觉上更重要的标题，并且内容文档中的标题理想情况下应该以 .这就是为什么 <h1> font-size 不是默认更大的 inside <article>, <aside>, <nav>, <section> 标签。

您的案例是第一级，即x h1，其中h1 的大小为1.50em 但此规则仅适用于h1，即h2 将具有其默认/原始大小1.50em。这里x 是<article> 标签。

:-webkit-any(article,aside,nav,section) h1 {
    font-size: 1.5em;
}

:-webkit-any(article,aside,nav,section)
:-webkit-any(article,aside,nav,section) h1 {
    font-size: 1.17em;
}

:-webkit-any() 选择器匹配括号内列出的任何标签，即 article、aside、nav、section。并且在<article>、<aside>、<nav> 或<section> 标签内缩小为正常标题的大小1.50em 等等，如上面的演示所示。

【讨论】：

你根本没有回答这个问题。问题是：为什么<h1> 和<h2> 在完全相同的<article> 或<section> 中有相同的font-size？这里不涉及嵌套。在完全相同的<article> 或<section> 元素中，人们会直观地期望<h2> 具有比<h1> 更小的font-size。为什么是一样的呢？规范的哪一部分在设计上要求这样做，为什么？
@LoneLearner 您是否仔细阅读了我的答案？我想你做到了。我添加了官方信息的解释。请再次检查。我展示的嵌套演示只是为了从更广泛的角度理解它。
您只回答了“如何”，而不是“为什么”。 Firefox 也这样做。为什么？好的，规范说他们应该这样做。为什么？为什么规范说要那样做？
@VicJordan 我确实仔细阅读了您的答案。关于嵌套的讨论虽然有用，但并没有回答这个问题。 w3c 文档的链接确实阐明了浏览器符合规范。为什么规范这么说或背后的理由仍未得到解答。
@VicJordan 没有必要暗示评论者没有彻底阅读您的答案。你似乎没有抓住重点。您说，“旨在使节标题小于默认页面标题，并且该规则仅适用于 h1 标记”。这里的问题是：为什么它的设计不是让<h2> 标记小于<h1> 标记在一个部分中，就像人们直观期望的那样？

【解决方案3】：

标题的大小由浏览器样式表决定（如果没有由用户样式表指定）。我试过铬。在开发者控制台中，我发现 chrome 正在覆盖文章、旁边、导航和部分的 h1 到 1.5em 的样式

:-webkit-any(article,aside,nav,section) h1 {
  font-size: 1.5em;
  -webkit-margin-before: 0.83em;
  -webkit-margin-after: 0.83em;
}

【讨论】：

这是一个好的开始。但是“为什么”的问题仍然存在。为什么<article> 中的 h1 与 h2 的大小相同？
@kexxcream 为什么在它没有回答问题时将其标记为已接受的答案？

【解决方案4】：

这只是关于 DOM 结构，因为不同的元素有不同的默认样式要继承。

看看这个link 表单MDN。

<h1>Text A</h1>

<header>
     <h1>Text A</h1> 
</header>
<section>
    <header>
         <h1>Text A</h1>

    </header>
</section>
<article>
    <header>
         <h1>Text A</h1>
          <section>
              <header>
                  <h1>Text A</h1>
              </header>
          </section>
    </header>
</article>

JSFiddle

编辑

这是因为文档样式要求。您可以在HTML 5.1 documentation @ 10.3.7 Sections and headings找到详细信息

【讨论】：

该链接没有解释两件事：1）h1和h2继承的默认样式是什么？ 2) 为什么 h3、h4、h5 和 h6 的大小不与 h1 和 h2 相同？为什么只有 h1 和 h2 大小相同？
@kexxcream 编辑了我的帖子
仍然没有回答我的问题。你说这是因为“风格要求”，但究竟如何？当在文章中呈现时，表明 h1 和 h2 将具有相同大小的信息到底在哪里？

【解决方案5】：

h1{ 
font-size:2em; 
} 
h2{ 
font-size:1.5em;
    }

<article> 
   <h1>This is heading 1.</h1>
   <h2>This is heading 2.</h2>
   <h3>This is heading 3.</h3>
   <h4>This is heading 4.</h4>
   <h5>This is heading 5.</h5>
   <h6>This is heading 6.</h6>
</article>

https://jsfiddle.net/razia/9wsc4vus/

【讨论】：

这是一个错误吗？

为什么会这样？

示例 1

示例 2

示例 3

然而

总结

元素：jsfiddle.net/uz3wqobe?

JSFiddle