在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
答案 0 :(得分：21)
它们由每个浏览器制造商独立定义。
它们在浏览器中并不统一，并且存在语义（大标题，略小的标题等...）。
如果你看一下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 { font-size: 2em; margin: .67em 0 }
h2 { font-size: 1.5em; margin: .75em 0 }
h3 { font-size: 1.17em; margin: .83em 0 }
h5 { font-size: .83em; margin: 1.5em 0 }
h6 { font-size: .75em; margin: 1.67em 0 }
h1, h2, h3, h4,
h5, h6 { font-weight: bolder }
（是的，我看到h4没有font-size:）
答案 1 :(得分：12)
一种可能的进展方法是使用平方根，通过公式如2 / sqrt [标题＃]。因此，你有：
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。 对于其他基础，结果可能距离整数稍远。
Fibonacci适用于16号基础，所以你有：
H1=32
H2=24
H3=19
H4=16
H5=14
H6=13
答案 2 :(得分：11)
与其他人一样，它依赖于浏览器。
另一方面，排版中有一条规则来设置字体大小：如果基本字体的大小为X，则较大的字体应呈指数增长;通常的方法是使用X*sqrt(2)，X*sqrt(2)^2，X*sqrt(2)^3等大小，但您可以更改基础。
但是，计算机字体有一些特殊要求。
它们过去只是以位图形式提供（所以尺寸是固定的），即使以矢量形式提供 - 某些格式更喜欢一些特殊尺寸：可被2或5整除（这与Amiga的情况一样）旧矢量字体... Agfa Intellifont？）。
即使现在字体引擎更像整数，因为它们的提示算法效果更好。
由于这些技术限制，人们似乎习惯了所选择的值，即使字体引擎现在好多了。
答案 3 :(得分：9)
我知道这篇文章很老了。我遇到了同样的问题，他们从哪里得到这个。我想我找到了。
它是五声音乐音阶的衍生物。无论如何，类型比例。标题取自类型标度，但不是按1：1的顺序排列。
规模如下： 8 9 10 12 14 16 18 21 24 ......比例分为5个步骤（12到24）。每个步骤是基数（12）乘以2（比例[＆＃39;它加倍＆＃39;]）到i的力（步长）除以5（ttl步）[＆＃39; i / 5＆＃39 ;] - 四舍五入到最近。
因此h4是基础，h3是步骤1，h2是步骤3，h1是步骤5，或者是五声音阶上的12。 h5和h6从另一个方向开始是1步和3步。如果我理解这一点，它将相当于a，E大调和弦。
我花了大约2个小时来弄清楚电子表格和音阶的解释。
答案 4 :(得分：6)
一些名义上的数字：
Default style sheet for HTML 4：
Firefox 3和Safari 4 (actually, WebCore)：
答案 5 :(得分：4)
在看了几种不同的字体大小的方法后，我想出了以下算法/计算：H1~H6，p，菜单等，html设置为100％（通常为16px），以及以下的rem单位。这是从经常使用的1.14 / .875'幻数中调整出来的。我的.8735看起来效果很好，p为16px / 1rem，高达H1为36px / 2.25rem，并且达到相当“正常”的px值，如12,14,16,18,21,24,28,32，我知道36，等等，对于Jumbotrons来说高达54，而对于.zilch来说这是矫枉过正的。我通常呆在.huge和.micro中。基本上我从p开始等于1.0rem并连续乘以.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更容易处理。
答案 6 :(得分：2)
以更一般的方式，像这样的相关尺寸通常基于几何系列，即每个连续数字比前一个更大的常数因子（类似于1.2或sqrt（2））。扳手和六角扳手的尺寸，或机械中的螺钉直径等，或A5 / A4 / A3 ...系列纸张尺寸都有相同的进展。
答案 7 :(得分：2)
他们中的许多人说标题标签的大小不同，但是从bootstrap到默认的font-size有一个变化。提到的是默认的字体大小：
h1 { font-size: 24px;}
h2 { font-size: 22px;}
h3 { font-size: 18px;}
h4 { font-size: 16px;}
h5 { font-size: 12px;}
h6 { font-size: 10px;}
答案 8 :(得分：1)
我认为这取决于浏览器，甚至可能让用户定义字体大小（我记得歌剧这样做）。 HTML spec没有详细说明：
HTML中有六个级别的标题，其中H1是最重要的，而H6是最不重要的。可视浏览器通常在较大字体中呈现比不太重要的字体更重要的标题。
这是故意的，因为HTML旨在描述结构，而不是文档的呈现。
答案 9 :(得分：1)
W3C建议浏览器实现a default rendering stylesheet。
你会发现你的数字与他们不同。那是因为浏览器制造商习惯忽视W3C所说的一切。
答案 10 :(得分：1)
对于bootstrap，标题标签字体大小的变化（以像素为单位）如下所示检查此引导标题
h1 - 36px）
h2 - 30px
h3 - 24px
h4 - 18px
h5 - 14px
h6 - 12px