HTML 中的 H1-H6 字体大小

Posted 2023-02-22

技术标签:

【中文标题】HTML 中的 H1-H6 字体大小【英文标题】：H1-H6 font sizes in HTML 【发布时间】：2011-01-20 12:24:03 【问题描述】：

在 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，等等）？

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

【问题讨论】：

在这里躲避障碍；看来，传统的规模是由两股斐波那契数列组成。来自 Robert Bringhurst 的 The Elements of Typographic Style 的示例：(a) 5, 8, 13, 21, 34..., 和 (b) 6, 10, 16, 26, 42... => 5、6、8、10、13、16、21、26... 【参考方案1】：

更新：如今，现代浏览器使用these values。

原答案：

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

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

如果您查看 HTML 4 规范 for these，则没有提及如何他们应该被设置样式，只是他们应该是。来自规范：

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

如果您希望这些保持一致，您应该使用定义它们的reset stylesheet。

尽管 w3 已经为 HTML 4 定义了建议的 default stylesheet 并具有以下详细信息，但大多数浏览器都会忽略此建议：

h1 字体大小：2em;边距：.67em 0 h2 字体大小：1.5em;边距：0.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:）

【讨论】：

它甚至没有走那么远。它描述了浏览器做什么，而不是他们应该做什么。 :) 是的，规范确实是根据当前实践编写的我担心这个问题会被这样解释，为此我试图通过在其中包含 100% 和 em 来表明我不是在询问浏览器实现。 h4 没有字体大小，因为它是 100%/1em，这是该样式表的默认字体大小（无需单独定义）。【参考方案2】：

一种可能的渐进方法是使用平方根，通过诸如 2/sqrt[heading#] 之类的公式。因此，您将拥有：

H1 = 2/sqrt1 = 2
H2 = 2/sqrt2 = 1.414
H3 = 2/sqrt3 = 1.155
H4 = 2/sqrt4 = 1
H5 = 2/sqrt5 = 0.894
H6 = 2/sqrt6 = 0.816

对于 12 的字体基数，这将足够接近 24、17、14、12、11、10。对于其他基数，结果可能与整数相差一些。

斐波那契可以很好地使用以 16 为底的，所以你有：

H1=32
H2=24
H3=19
H4=16
H5=14
H6=13

【讨论】：

【参考方案3】：

正如其他人所说，它依赖于浏览器。

另一方面，在排版中设置字体大小有一条规则：如果基本字体的大小为X，则较大的字体应呈指数增长；通常的方法是设置大小X*sqrt(2)、X*sqrt(2)^2、X*sqrt(2)^3 等，但您可以更改基数。

但是，计算机字体有一些特殊要求。

它们过去仅以位图形式提供（因此尺寸是固定的），即使以矢量形式提供——某些格式更喜欢一些特殊尺寸：可被 2 或 5 整除（Amiga 的情况就是这样）旧的矢量字体... Agfa Intellifont？）。

即使现在字体引擎更喜欢整数大小，因为它们的提示算法工作得更好。

而且人们似乎已经习惯了由于这些技术限制而选择的值，尽管现在字体引擎变得更好了。

【讨论】：

虽然这个答案有一个公式，但它并不完全适用于这些数字； IE。 24*sqrt(2) ~ 34，而不是 36。否则我误解/计算错误。 @DrJokepu：如果我每次在 SO 上学到一些东西时都发表评论，我会得到更多“你是人类吗”页面 ;-) (blog.***.com/2009/07/are-you-a-human-being)【参考方案4】：

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

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

比例是： 8 9 10 12 14 16 18 21 24... 刻度以 5 步（12 到 24）加倍。每一步都是基数（12）乘以 2（比例['it doubles']）的 i（step）的幂除以 5（ttl steps）['i/5'] - 四舍五入到最接近的值。

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

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

【讨论】：

【参考方案5】：

一些名义数字：

Default style sheet for HTML 4:

h1: 2em h2: 1.5em h3: 1.17em h4: 1em h5: 0.83em h6: 0.75em

Firefox 3 和Safari 4 (actually, WebCore)：

h1: 2em h2: 1.5em h3: 1.17em h4: 1em h5: 0.83em h6: 0.67em

【讨论】：

HTML 的模式似乎是三角形：n * (n + 1) * 0.17 其中n 是远离 h4 的标头级别。 0.17 * 1 = 0.17; 0.17 * 3 = 0.51, 1.02.【参考方案6】：

在查看了几种不同的字体大小方法后，我提出了以下算法/计算方法，其中 H1~H6、p、菜单等，html 设置为 100%（通常为 16px），以下以 rem 为单位。这是从常用的 1.14/.875 '幻数'中调整而来的。我的是 0.8735，它似乎在 p 为 16px/1rem 到 H1 为 36px/2.25rem 时效果很好，并且在整个过程中都达到了相当“正常”的 px 值，例如 12、14、16、18、21、24、28、32， 36 等，对于 Jumbotrons 最多 54 和 .zilch，我知道这太过分了。我通常停留在 .huge 和 .micro 之内。基本上我从等于 1.0rem 的 p 开始，然后依次乘以 .8735 以变小或除以它以变大：

 item    rem   px   pt
.giant  3.38  54.4  41
.huge   2.95  47.2  35
.big    2.58  41.3  31
 h1     2.25  36.0  27
 h2     1.97  31.5  24
 h3     1.72  27.5  21
 h4     1.50  24.0  18
 h5     1.31  21.0  16
 h6     1.15  18.4  14
 p      1.00  16.0  12
.menus  0.87  13.9  10
.legal  0.76  12.2   9
.micro  0.67  10.7   8
.zilch  0.58   9.3   7

/* Font-Sizes using pt */
.giant  font-size:41pt; 
 .huge  font-size:35pt; 
  .big  font-size:31pt; 
    h1  font-size:27pt; margin-top:0; 
    h2  font-size:24pt; 
    h3  font-size:21pt;  
    h4  font-size:18pt; 
    h5  font-size:16pt; 
    h6  font-size:14pt; 
     p  font-size:12pt; margin-bottom:15pt; 
.menus  font-size:10pt; 
.legal  font-size: 9pt; 
.micro  font-size: 8pt; 
.zilch  font-size: 7pt;

我最近一直在使用点 (pt)，如您所见，它更容易使用，在每个人都因为不使用 rem 或 em 而变得不正常之前，我会坦率地说，在这一点上（没有双关语打算）我真的不认为这很重要。我开始使用对我来说更容易的东西。使用计算为简单整数的点比使用小数点的 rems 更容易。

【讨论】：

【参考方案7】：

在更一般的方式中，像这样的相关尺寸通常基于几何级数，即每个连续数字都比前一个数字大一个常数因子（例如 1.2 或 sqrt(2)）。扳手和六角扳手的尺寸，或螺丝直径等在机械方面，或在 A5/A4/A3... 纸张尺寸系列中都有相同的进展。

【讨论】：

【参考方案8】：

他们中的许多人说标题标签的大小不同，但从引导程序到默认字体大小有所不同。这里提到的是默认字体大小：

h1  font-size: 24px;
h2  font-size: 22px;
h3  font-size: 18px;
h4  font-size: 16px; 
h5  font-size: 12px; 
h6  font-size: 10px;

【讨论】：

【参考方案9】：

我认为这取决于浏览器，它甚至可以让用户定义字体大小（我记得 Opera 就是这样做的）。 HTML spec 没有详细说明：

HTML 中有六个级别的标题，其中 H1 最重要，H6 最不重要。视觉浏览器通常以比不太重要的字体更大的字体呈现更重要的标题。

这是故意的，因为 HTML 旨在描述结构，而不是文档的表示。

【讨论】：

【参考方案10】：

W3C 建议 a default rendering stylesheet 供浏览器实现。

您会注意到您的数字与他们不同。这是因为浏览器制造商习惯于无视 W3C 所说的一切。

【讨论】：

我不认为这是 W3C 的建议：相反，我认为这是 W3C 所说的，他们发现浏览器实际上已经实现了。当 W3C 是浏览器供应商时，浏览器供应商很难忽视 W3C。所有浏览器供应商都是 W3C 的成员，并在规范上签字。 @ChrisW, FTA：“鼓励开发人员在其实现中将其用作默认样式表。” @Rob，如果他们后来觉得另一个价值更好地服务于他们的目的，这并不意味着他们会遵循指导方针。它说，“这个样式表描述了基于对当前 UA 实践的广泛研究的所有 HTML 4 ([HTML4]) 元素的典型格式。”【参考方案11】：

对于 bootstrap，标题标签字体大小（以像素为单位）的变化如下，请检查此 bootstrap 标题

h1 - 36px) h2 - 30像素 h3 - 24像素 h4 - 18px h5 - 14像素 h6 - 12像素

【讨论】：

以上是关于HTML 中的 H1-H6 字体大小的主要内容，如果未能解决你的问题，请参考以下文章

Xcode 6 大小类中的自定义字体大小无法与自定义字体一起正常工作

当在反应本机中输入超过 6 个字符时，如何更改 textInput 文本中的字体大小？

安卓编程怎样自定义menu中的字体大小

html下拉列表：改[字体大小，有重赏！

为 iPhone 5 和 6 设置不同的字体大小

在不丢失 Html 样式的情况下更改 NSAttributedString 中的字体大小 - Swift