html标题标记(<h1>,<h2>,<h3>等)的默认字体大小(以像素为单位)是什么？

Question

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

Answer 1

我认为如下:

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与像素不同.这是查看尺寸的相对方式.据说我认为大多数浏览器默认为16px(或1em).

Answer 2

另一种方式是:

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)

Answer 3

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

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 | 2em    | 32px
h2 | 1.5em  | 24px
h3 | 1.17em | 18.72px
h4 | 1em    | 16px
h5 | 0.83em | 13.28px
h6 | 0.67em | 10.72px

Answer 4

有关实际证明，请查看具有 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;
}