HTML中的H1-H6字体大小
在HTML中（在一般情况下，我认为），似乎有一些H1-H6元素定义的大小。
也就是说，如果基线字体大小是16px（或100％），那么h1（w / c）应该是2.25em（36px）。 H2（w / c）应该是1.5em（24px）。 等等。 这些variables从哪里来？ H1 = 36px，H2 = 24px，H3 = 21px，H4 = 18px，H5 = 16px，H6 = 14px，也就是说。 （或者，如果你喜欢的话，H1 = 2em，H2 = 1.5em，H3 = 1.17em等等，这点不是数字本身，而是它们之间的关系）
他们有一些math公式吗？ 这是否与黄金比例或斐波那契有关？ 我一直无法find这方面的信息。
编辑：更具体的是什么模式; 为什么从36到24到21，或从36开始（如果你喜欢，从2em到1.5em到1.17em等）？
噢，我忘了指明原来的号码是从哪里来的
我知道这个post是旧的。 我遇到了同样的问题，他们从哪里得到这个问题。 我想我find了。
这是一个五声音阶的推导。 Type scale是无论如何。 标题取自“types”标尺，但不是按1：1的顺序。
规模是：8 9 10 12 14 16 18 21 24 …规模加倍5步（12至24）。 每一步都是基数（12）乘以2（刻度['加倍']）与i（step）的乘方除以5（ttl steps）['i / 5'] – 四舍五入到最近。
所以h4是基础，h3是第一步，h2是第三步，h1是第五步，或者在五声音阶上是12的主动。 h5和h6是从另一路开始的第一步和第三步。如果我明白这一点，那就相当于一个E大调和弦。
这花了我大约2个小时，找出一个电子表格和音乐尺度的解释。
它们由每个浏览器制造商独立定义。
它们在浏览器中是不统一的，在语义上也是如此（大标题，稍微小一点的标题等等）。
如果你看看这些HTML 4规范，就不会提到它们是如何被devise的，只是它们应该是。 从规格：
Visual browsers usually render more important headings in larger fonts than less important ones.
如果你想要这些是一致的，你应该使用定义它们的重置样式表 。
尽pipew3已经为HTML 4定义了一个build议的默认样式表 ，但是大多数浏览器都忽略了这个build议：
h1 {font-size：2em; 保证金：.67em 0}
h2 {font-size：1.5em; 保证金：.75em 0}
h3 {font-size：1.17em; 保证金：.83em 0}
h5 {font-size：.83em; 保证金：1.5em 0}
h6 {font-size：.75em; 保证金：1.67em 0}
h1，h2，h3，h4，
h5，h6 {font-weight：bolder}
（是的，我没有看到font-size:对于H4）
正如其他人所说，它依赖于浏览器。
另一方面，在排版中有一个规则来设置字体大小：如果基本字体的大小为X ，则较大的字体应该呈指数级增长; 通常的方法是有尺寸X*sqrt(2) ， X*sqrt(2)^2 ， X*sqrt(2)^3等等，但您可以更改基数。
但是，电脑字体有一些特殊的要求。
它们以前只能以位图的forms提供（所以尺寸是固定的），甚至在以vectorforms提供的时候 – 有些格式更喜欢一些特殊的尺寸：可以被2或5整除（Amiga的旧vector字体Agfa Intellifont？）。
即使现在像整数大小的字体引擎，因为他们的提示algorithm效果更好。
人们似乎已经习惯了因为这些技术限制而select的价值，即使字体引擎现在好多了。
一种可能的进展方法是使用平方根，通过公式如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。对于其他基数，结果可能会远离整数。
斐波纳契可以在16位基础上运行，所以你可以：
H1=32 H2=24 H3=19 H4=16 H5=14 H6=13
一些名义数字：
HTML 4的默认样式表 ：
- h1：2em
- h2：1.5em
- h3：1.17em
- h4：1em
- h5：0.83em
- h6：0.75em
Firefox 3和Safari 4（实际上，WebCore） ：
- h1：2em
- h2：1.5em
- h3：1.17em
- h4：1em
- h5：0.83em
- h6：0.67em
在查看几种不同的字体大小的方法（H1〜H6，p，菜单等等，html被设置为100％（通常是16px），以下是rem单元）后，我想出了下面的algorithm/计算。 这是从经常使用的1.14 / .875'魔术数字调整的。 Mine是.8735，似乎在16px / 1rem的p下达到了36px / 2.25rem的p，并且在整个12,14,16,18,21,24,28,32和32中都达到了相当“正常”的px值。 36，等Jumbotrons高达54，下降到.zich这是过度杀伤，我知道。 我通常留在.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更容易。
以更一般的方式，像这样的相关大小通常基于几何级数，即每个连续数大于前一个数的常数（比如1.2或sqrt（2））。 机械手中的扳手和六angular扳手的尺寸，螺丝直径等，以及纸张尺寸的A5 / A4 / A3 …系列都有同样的进展。
我认为这取决于浏览器，甚至可以让用户定义字体大小（我记得opera做的）。 HTML规范没有详细说明：
HTML中有六个层次的标题，其中H1最重要，H6最less。 可视化浏览器通常以较大的字体呈现更重要的标题，而不是较不重要的标题。
这是故意的，因为HTML是用来描述结构，而不是文档的表示。
W3Cbuild议为浏览器实现一个默认的渲染样式表 。
你会注意到你的数字与他们不同。 这是因为浏览器制造商习惯于忽略W3C所说的一切。
他们中的许多人对标题标签说不同的大小，但是从引导程序到默认字体大小有所不同。这里提到的是默认的字体大小：
h1 { font-size: 24px;} h2 { font-size: 22px;} h3 { font-size: 18px;} h4 { font-size: 16px;} h5 { font-size: 12px;} h6 { font-size: 10px;}
对于引导程序，像素中的标题标签字体大小的变化如下检查这个引导标题
h1 – 36px）
h2 – 30px
h3 – 24px
h4 – 18px
h5 – 14px
h6 – 12px
