logo标签列表

默认情况下，HTML标题标记（<h1>，<h2>，<h3>等）的字体大小是多少像素？

html
51

标题（h1-h6）标签的默认字体像素大小是多少？

6
这并非毫无意义。不同的标题标签有默认大小，询问这些大小是合理的。 - wesmat
你具体需要哪一个 321,219,449 种不同的浏览器/版本/操作系统组合？ - connexo
5个回答
69

另一种说法是：

h1 is   32px   (2em)
h2 is   24px (1.5em)
h3 is 20.8px (1.3em)
h4 is   16px   (1em)
h5 is 12.8px (0.8em)
h6 is 11.2px (0.7em)
59

我认为它应该是这样的：

h1 is 2 em
h2 is 1.5 em
h3 is 1.3 em
h4 is 1 em
h5 is 0.8 em
h6 is 0.7 em

em不等同于像素（pixel），它是一种相对于大小的方式。话虽如此，我认为大多数浏览器默认为16px（或1em）。

Sam Benson的回复回答了关于像素大小的原始问题。 - benihana21
1
h3、h5和h6的值已经过时，请参见下面的答案。 - mb21
13

这是在浏览器默认样式表中设置的。截至2023年，现代浏览器都将这些设置为相同的em值。在现代浏览器中，默认情况下1em等于16像素，因此：

h1 | 2em    | 32px
h2 | 1.5em  | 24px
h3 | 1.17em | 18.72px
h4 | 1em    | 16px
h5 | 0.83em | 13.28px
h6 | 0.67em | 10.72px

这些值是WhatWG的最新标准推荐的，我检查了Chrome、Firefox和Safari确实实现了这些值。

（请注意，h5和h6的值与HTML 4的默认样式表略有不同。）

最后，您可以运行以下代码片段并在您选择的浏览器中进行检查：

<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>

10

为了提供实际的证明，您可以查看 Mozilla Firefox 默认样式下的 html.css 文件（171-237 行）：

h1 {
  font-size: 2em;
}

h2 {
  font-size: 1.5em;
}

h3 {
  font-size: 1.17em;
}

h4 {
  font-size: 1.00em;
}

h5 {
  font-size: 0.83em;
}

h6 {
  font-size: 0.67em;
}

整个CSS如下所示：
h1 {
  display: block;
  font-size: 2em;
  font-weight: bold;
  margin-block-start: .67em;
  margin-block-end: .67em;
}

h2,
:-moz-any(article, aside, nav, section)
h1 {
  display: block;
  font-size: 1.5em;
  font-weight: bold;
  margin-block-start: .83em;
  margin-block-end: .83em;
}

h3,
:-moz-any(article, aside, nav, section)
:-moz-any(article, aside, nav, section)
h1 {
  display: block;
  font-size: 1.17em;
  font-weight: bold;
  margin-block-start: 1em;
  margin-block-end: 1em;
}

h4,
:-moz-any(article, aside, nav, section)
:-moz-any(article, aside, nav, section)
:-moz-any(article, aside, nav, section)
h1 {
  display: block;
  font-size: 1.00em;
  font-weight: bold;
  margin-block-start: 1.33em;
  margin-block-end: 1.33em;
}

h5,
:-moz-any(article, aside, nav, section)
:-moz-any(article, aside, nav, section)
:-moz-any(article, aside, nav, section)
:-moz-any(article, aside, nav, section)
h1 {
  display: block;
  font-size: 0.83em;
  font-weight: bold;
  margin-block-start: 1.67em;
  margin-block-end: 1.67em;
}

h6,
:-moz-any(article, aside, nav, section)
:-moz-any(article, aside, nav, section)
:-moz-any(article, aside, nav, section)
:-moz-any(article, aside, nav, section)
:-moz-any(article, aside, nav, section)
h1 {
  display: block;
  font-size: 0.67em;
  font-weight: bold;
  margin-block-start: 2.33em;
  margin-block-end: 2.33em;
}
2
没错。请查看此链接：https://html.spec.whatwg.org/multipage/rendering.html - snowdream
在16像素的比例尺上，它是：h1: 32像素，h2: 24像素，h3: 18⅔像素，h4: 16像素，h5: 13⅓像素，h6: 10⅔像素。在12像素的比例尺上，它是：h1: 24像素，h2: 18像素，h3: 14像素，h4: 12像素，h5: 10像素，h6: 8像素。 - pythoncoder42
3

至关重要的提示：

浏览器中 h1-h6 标签的大小不同，没有任何 W3 规范来强制规定标题标签的标准大小。每个浏览器都有自己的实现。

建议使用 CSS normalizer 使所有浏览器中标题标签的大小统一。可以通过定义自定义大小来覆盖默认浏览器值来实现。

1
实际上，在每个当前主要的浏览器上它们是相同的。 - PRMan
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接