HTML 中的 H1-H6 字体大小

Question

在 HTML 中（我想在一般的排版中），似乎有一些为 H1-H6 元素定义的大小。

也就是说，如果基线字体大小是 16px（或 100%），那么 h1 (w/c) 应该是 2.25em (36px)。 H2 (w/c) 应该是 1.5em (24px)。等等。这些变量从何而来？ H1=36px，H2=24px，H3=21px，H4=18px，H5=16px，H6=14px，即。 （或者，如果你愿意，H1=2em，H2=1.5em，H3=1.17em，等等，重点不是数字本身，而是它们之间的关系）

他们有一些数学公式吗？它与黄金比例或斐波那契有关吗？我没能找到这方面的信息。

编辑：更具体地说，模式是什么；为什么它从 36 到 24 再到 21，或者从 36 开始（或者，如果你愿意，从 2em 到 1.5em 再到 1.17em，等等）？

哦，我忘了说明我是从哪里得到原始数字的，它们来自 这里

原文由 morbusg 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我知道这篇文章很旧。我遇到了同样的问题，他们从哪里得到这个。我想我找到了。

它是五声音阶的派生。无论如何，类型比例都是。标题取自类型比例，但不是 1:1 的顺序。

比例为：8 9 10 12 14 16 18 21 24… 比例在 5 个步骤（12 到 24）中加倍。每一步都是 base(12) 乘以 2（比例 [‘it doubles’]）到 i（step）的幂除以 5（ttl steps）[‘i/5’] - 四舍五入到最接近的。

所以 h4 是基础，h3 是第 1 步，h2 是第 3 步，h1 是第 5 步，或者五声音阶上 12 的八度音阶。 h5 和 h6 是 base 的 1 步和 3 步。如果我理解这一点，它相当于 a，E 大调和弦。

我花了大约 2 个小时才用电子表格和音阶解释弄明白了。

原文由 Dante 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

更新：如今，现代浏览器使用 这些值。

原答案：

它们由每个浏览器制造商独立定义。

它们在浏览器中并不统一，并且存在语义（大标题，略小的标题等……）。

如果您查看 这些 的 HTML 4 规范，则没有提及它们应该 如何 设置样式，只是提及它们 应该 如何设置。从规格：

Visual browsers usually render more important headings in larger fonts than less important ones.

如果您希望它们保持一致，您应该使用定义它们的 重置样式表。

尽管 w3 已经为 HTML 4 定义了一个建议的 默认样式表，其中包含以下详细信息，但大多数浏览器都会忽略此建议：

h1 { 字体大小：2em;保证金：.67em 0 }
h2 { 字体大小：1.5em;保证金：.75em 0 }
h3 { 字体大小：1.17em;保证金：.83em 0 }
h5 { 字体大小：.83em;保证金：1.5em 0 }
h6 { 字体大小：.75em;保证金：1.67em 0 }
h1, h2, h3, h4,
h5, h6 { 字体粗细：粗体}

（是的，对于 h4，我看不到 font-size: ）

原文由 Oded 发布，翻译遵循 CC BY-SA 4.0 许可协议