编辑:更具体地说,它们的模式是什么?为什么从36到24再到21,或者从36开始(或者,如果您喜欢,从2em到1.5em到1.17em等)?
哦,我忘了说明原始数字来自这里。
更新:现代浏览器使用这些值。
原始回答:
它们由各个浏览器制造商独立定义。
它们在各个浏览器中不是统一的,仅用于语义(大标题,稍小标题等等...)。
如果您查看HTML 4规范对于这些标题,没有提及应该如何应用样式,只是建议需要应用样式。从规范上看:
视觉浏览器通常将更重要的标题渲染为比不那么重要的标题更大的字体。
如果您想使这些标题保持一致,请使用定义了这些标题样式的重置样式表。
尽管w3已经为HTML 4定义了建议的默认样式表并提供以下详细信息,但大多数浏览器都忽略了此建议:
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:
)
一种可能的进阶方法是使用平方根,通过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
这与浏览器相关,正如其他人所说。
另一方面,印刷排版有一个设置字体大小的规则:如果基本字体大小为X
,那么较大的字体应该呈指数增长;通常的方法是使用X*sqrt(2)
、X*sqrt(2)^2
、X*sqrt(2)^3
等大小,但你可以更改基础大小。
然而,计算机字体有一些特殊要求。
它们过去只以位图形式提供(因此大小固定),即使以矢量形式提供 - 一些格式也更喜欢某些特殊大小:可被2或5整除(例如Amiga的旧矢量字体...Agfa Intellifont)。
即使现在字体引擎变得更好了,它们也喜欢整数大小,因为它们的提示算法更有效。
尽管字体引擎现在变得更好了,但人们似乎已经习惯了由于这些技术限制而选择的值。
我知道这篇文章已经有些老了,但是我也有同样的问题,他们是从哪里得到的呢?我想我找到了答案。
它是五声音阶的一个派生物。至少 Type 音阶是如此。标题是从 Type 音阶中取的,但不是 1:1 的次序。
音阶如下:
8 9 10 12 14 16 18 21 24... 音阶每五步翻倍(12 到 24)。每一步都是基数(12)乘以2(音阶【它翻倍】)的i(step)次方除以5(ttl steps) [ 'i/5'] - 四舍五入。所以 h4 是基数,h3 是第一步,h2 是第三步,h1 是第五步,或者是五声音阶上 12 的八度。h5 和 h6 是另一边距离基数的 1 和 3 步。如果我理解正确,这相当于 A、E 大调和弦。
我用电子表格和关于音阶的解释花了大约两个小时才弄明白这个。
一些名义数字:
Firefox 3和Safari 4(实际上是WebCore):
n * (n + 1) * 0.17
,其中n
是标题距离h4的级别。 0.17 * 1 = 0.17; 0.17 * 3 = 0.51, 1.02
。 - Ceasar其中fi是计算得出的值(重复5次),
f0是初始值,在本例中为1.0rem,
r是比率,在本例中为2,因为我们想要从H6到H1的字号从1.0rem变为2.0rem,
i是我们所在的迭代次数,即1~5,
n是从H6到H1所需的步数,在本例中为5。
您得到的结果如下:
h1 { font-size: 2.0rem; }
h2 { font-size: 1.741rem; }
h3 { font-size: 1.516rem; }
h4 { font-size: 1.320rem; }
h5 { font-size: 1.149rem; }
h6 { font-size: 1.0rem; }
他们将进展提高到更高的水平,仅需2个步骤:
h1 { font-size: 2.058rem; }
h2 { font-size: 1.618rem; }
h3 { font-size: 1.272rem; }
p { font-size: 1.0rem; }
small { font-size: 0.87rem; }
通常,类似这样的相关尺寸都是基于等比数列的,也就是每个连续的数字都比前一个数字增加一个恒定的因子(例如1.2或sqrt(2))。在机械领域中,扳手和六角钥匙的大小、螺丝直径等也有同样的进展。在纸张尺寸方面,A5/A4/A3等也是如此。
许多人提到标题标签的不同大小,但是在Bootstrap和默认字体大小之间存在差异。以下是默认字体大小:
h1 { font-size: 24px;}
h2 { font-size: 22px;}
h3 { font-size: 18px;}
h4 { font-size: 16px;}
h5 { font-size: 12px;}
h6 { font-size: 10px;}
我认为这取决于浏览器,甚至可能让用户定义字体大小(我记得Opera做过)。 HTML规范 没有详细说明:
HTML中有六个级别的标题,H1是最重要的,H6是最不重要的。视觉浏览器通常会以比较不重要的标题更大的字体呈现更重要的标题。
这是有意为之的,因为HTML旨在描述文档的结构而不是呈现方式。
W3C建议浏览器实现默认渲染样式表。
你会注意到你的图形与它们不同。这是因为浏览器制造商有忽略W3C所说的一切的习惯。