53

在 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,等等)?

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

4

11 回答 11

23

更新:如今,现代浏览器使用这些值

原答案:

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

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

如果您查看这些的 HTML 4 规范,则没有提及它们应该如何设置样式,只提到它们应该。从规范:

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

如果您希望这些保持一致,您应该使用定义它们的重置样式表。

尽管 w3 已经为 HTML 4 定义了一个建议的默认样式表,其中包含以下详细信息,但大多数浏览器都忽略了这个建议:

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 { 字体粗细:加粗 }

(是的,我认为font-size:h4 没有)

于 2010-02-24T12:25:31.730 回答
13

一种可能的进展方法是使用平方根,通过诸如 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
于 2015-02-22T15:17:46.527 回答
11

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

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

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

它们过去仅以位图形式提供(因此尺寸是固定的),即使以矢量形式提供——某些格式更喜欢一些特殊的尺寸:可被 2 或 5 整除(Amiga 的旧矢量字体就是这种情况... 爱克发 Intellifont?)。

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

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

于 2010-02-24T12:34:45.347 回答
10

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

它是五声音阶的派生。无论如何,类型比例是。标题取自类型比例,尽管不是 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 步。如果我理解这一点,它将相当于 a、E 大调和弦。

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

于 2017-03-04T19:36:00.350 回答
6

一些名义数字:

HTML 4 的默认样式表

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

Firefox 3Safari 4(实际上是 WebCore)

  • h1:2em
  • h2:1.5em
  • h3:1.17em
  • h4:1em
  • h5:0.83em
  • h6:0.67em
于 2010-02-24T12:36:54.307 回答
5

在查看了几种不同的字体大小方法后,我提出了以下算法/计算,其中 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 之内。基本上,我从等于 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 更容易。

于 2016-04-07T17:26:19.023 回答
2

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

于 2010-02-24T12:40:34.710 回答
2

他们中的许多人说标题标签的大小不同,但从引导程序到默认字体大小存在差异。这里提到的是默认字体大小:

h1 { font-size: 24px;}
h2 { font-size: 22px;}
h3 { font-size: 18px;}
h4 { font-size: 16px;} 
h5 { font-size: 12px;} 
h6 { font-size: 10px;}
于 2015-11-30T18:14:32.393 回答
1

我认为这取决于浏览器,它甚至可以让用户定义字体大小(我记得歌剧这样做)。HTML 规范没有详细说明:

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

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

于 2010-02-24T12:29:16.807 回答
1

W3C 建议为浏览器实现一个默认的呈现样式表。

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

于 2010-02-24T12:29:52.567 回答
1

对于引导程序,标题标签字体大小(以像素为单位)的变化如下,请检查此引导程序标题

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

于 2015-11-30T18:19:00.887 回答