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

對於實際證明，請查看具有 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;
}

Answer 4

h1 - h6 標簽的大小因瀏覽器而異。 沒有 W3 規范強制執行標題標簽的標准大小。 每個瀏覽器都實現了自己的。

建議使用 CSS normalizer 使所有瀏覽器的大小統一。 您可以通過定義標簽的自定義大小來覆蓋默認瀏覽器值來實現此目的。

Answer 5

這是在瀏覽器的默認樣式表中設置的。 現代瀏覽器都將這些設置為相同的 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>h1</h1> <h2>h2</h2> <h3>h3</h3> <h4>h4</h4> <h5>h5</h5> <h6>h6</h6>