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等)？

哦,我忘了说明我想出原始数字的地方,他们就是从这里来的

Answer 1

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

它们在浏览器中并不统一,并且存在语义(大标题,略小的标题等等).

如果你看一下HTML 4规范这些,也没有提到如何,他们都应该是病急乱投医,只是他们应该是.从规格:

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

如果希望这些一致,则应使用定义它们的重置样式表.

尽管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 }

(是的,我看不到font-size:h4)

Answer 2

一种可能的进展方法是使用平方根,通过公式如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

Answer 3

正如其他人所说,它依赖于浏览器.

另一方面,排版中有一条规则来设置字体大小:如果基本字体有大小X,则较大的字体应呈指数增长; 通常的方式是有大小X*sqrt(2),X*sqrt(2)^2,X*sqrt(2)^3等等,但你可以改变的基础.

但是,计算机字体有一些特殊要求.

它们过去只是以位图形式提供(所以大小是固定的),即使以矢量形式提供 - 某些格式更喜欢一些特殊尺寸:可被2或5整除(这与Amiga的旧矢量字体有关) ... Agfa Intellifont？).

即使现在字体引擎更像整数,因为它们的提示算法效果更好.

由于这些技术限制,人们似乎已经习惯了所选择的值,即使字体引擎现在好多了.

Answer 4

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

它是五声音乐音阶的衍生物.无论如何,类型比例.标题取自类型标度,但不是按1:1的顺序排列.

比例为:8 9 10 12 14 16 18 21 24 ......比例分为5个步骤(12到24).每个步骤是基数(12)乘以2(标度['它加倍'])到i的幂(步长)除以5(ttl步)['i/5'] - 四舍五入到最近.

所以h4是基础,h3是步骤1,h2是步骤3,h1是步骤5,或者是五音阶的12.h5和h6从另一个方向是1步和3步.如果我理解这一点,它将相当于一个E大调和弦.

这花了我大约2个小时来弄清楚电子表格和音阶的解释.

Answer 5

一些名义数字:

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

Answer 6

经典的印刷比例基于从根字体大小的H6到双倍大小的H1 。:root或html元素设置为100%，通常转换为16px。任何设置为1.0rem 的值都采用:root 元素的值，缩写为rem。

要计算从1.0rem到2.0rem的大小级数，分5 个步骤，即H2、H3、H4、H5、H6 ，数学公式如下所示：

其中fi是计算值（重复 5 次），
f0是初始值，在本例中为1.0rem ，
r是比率，在本例中为2，因为我们想要从H6到H1的范围从1.0rem变为2.0rem，i是我们正在进行的迭代，所以1~5，n是从H6到H1的步骤数，在本例中为 5 。

您得到的结果如下：

h1 { font-size: 2.00rem; }
h2 { font-size: 1.74rem; }
h3 { font-size: 1.52rem; }
h4 { font-size: 1.32rem; }
h5 { font-size: 1.15rem; }
h6 { font-size: 1.00rem; }

它看起来像这样：


一些设计基于黄金比例（r = 1.618034）

他们将进度设置得更高，并且只需两步：

h1 { font-size: 2.06rem; }
h2 { font-size: 1.62rem; }
h3 { font-size: 1.27rem; }

其他人使用em而不是 rem ，以允许最终用户的设置控制进度，因为连续标题引用父标题大小而不是始终引用 :root 元素大小。

我个人使用印刷比例和rem单位，因为我发现我对显示和布局有更多的控制权，但允许最终用户通过将我的设置为100%来设置他们的:root值。我还相应地设置了big、p和small尺寸。因此我使用：

  big { font-size: 2.29rem; }
    p { font-size: 1.00rem; }
small { font-size: 0.87rem; }