H1-H6标签最常用的字体大小是什么？

107

我一直不确定从哪里开始，这是一般的最佳实践基准。是的，我知道这取决于您的设计-但是最常见的是什么？

这是我目前作为入门者的内容：

h1 { font-size: 24px;}
h2 { font-size: 22px;}
h3 { font-size: 18px;}
h4 { font-size: 16px;}
h5 { font-size: 12px;}
h6 { font-size: 10px;}

是的，我们目前的工作不使用EM。

谢谢

html css frontend

— 斯图里姆
source

不要认为这是一个合适的问题，因为没有答案..

— Treemonkey

Treemonkey，真的吗？征求意见是不好的吗？

— rsturim 2011年

我最喜欢的事情是当我在Google上搜索某物时，最常见的结果是一个StackOverflow帖子，并且该问题已关闭或保留。没有什么比经受时间的考验过时的陈旧的知识封装更好。

— 凯尔·凯利2013年

不，@ rsturim，征询意见不是好的

— Liam

我搜索了这样的问题，因此当不在该特定堆栈的主题范围内时，我发现它很有用。关闭此问题意味着无法添加进一步的对话，辩论或答案，从而降低了此问题对整个社区的价值。我已经看到其他脱题问题迁移到更合适的堆栈。这个问题可以解决吗？干杯

— 皮特

Answers:

213

这将取决于浏览器的默认样式表。您可以在此处查看 CSS2.1用户代理样式表默认值的（非正式）表。

根据上面列出的页面，默认大小如下所示：

    IE7     IE8     FF2         FF3         Opera   Safari 3.1
H1  24pt    2em     32px        32px        32px    32px       
H2  18pt    1.5em   24px        24px        24px    24px
H3  13.55pt 1.17em  18.7333px   18.7167px   18px    19px
H4  n/a     n/a     n/a         n/a         n/a     n/a
H5  10pt    0.83em  13.2667px   13.2833px   13px    13px
H6  7.55pt  0.67em  10.7333px   10.7167px   10px    11px

同样值得一看的是HTML 4的默认样式表。W3C建议将这些样式用作默认样式。摘录摘录：

h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.17em; }
h4 { font-size: 1.12em; }
h5 { font-size: .83em; }
h6 { font-size: .75em; }

希望此信息对您有所帮助。

— 甜甜圈
source

针对H6的HTML 4建议已被忽略，赢得了0.67em；如今，WebKit和FF使用与emIE8 相同的大小。 w3.org/TR/html-markup/h6.html还说“典型”显示为0.67em。

— 贝尼·切尔尼亚夫斯基-帕斯金

这个人或某个随便的家伙背后的任何理由曾经说过“会有这样的标题”吗？

— rzb

更新答案以包括HTML5默认值是一个好主意。

— 全能骆驼Moha's

在HTML5上的此处w3.org/TR/html5/rendering.html#sections-and-headings

— Sirens

@ BeniCherniavsky-Paskinthe链接已断开，您能不能发布一个新的链接？

— kuldeep

标题通常为黑体字；为演示尺寸对应关系已将其关闭。MSIE和Opera解释这些大小的方式相同，但是请注意，Gecko浏览器和Chrome浏览器将Heading 6解释为11个像素，而不是10像素/字体大小1，将Heading 3解释为19个像素，而不是18像素/字体大小4（尽管很难即使直接进行比较，也无法使用时才能分辨出差异）。壁虎似乎还限制文本不小于10像素。

— 苏吉特·阿加瓦尔
source