H1-H6标签最常用的字体大小是多少？

Question

我一直不确定如何开始制定通用的最佳实践基线。是的，我知道这取决于你的设计，但最常见的是什么？

以下是我目前使用的起点：

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。

- rsturim

---

我不认为这是一个恰当的问题，因为它没有答案。 - Treemonkey

树猴子，真的吗？问问别人的意见不可以吗？ - rsturim

我最喜欢的事情是当我在谷歌搜索某个问题时，StackOverflow 的帖子成为了排名第一，而且这个问题已经被关闭或暂停回答。没有什么比这种老套的知识总结更能经得起时间的考验了。 - Kyle Kelley

不，@rsturim，征求意见是不可取的。 - Liam

我搜索了一个类似的问题，虽然与这个特定的问题不相关，但我认为它很有用。关闭这个问题意味着不能再进行进一步的对话、辩论或回答，降低了这个问题对整个社区的价值。我看到其他不相关的问题被迁移到更合适的堆栈上。能否把这个问题也迁移过去呢？谢谢~ - Pete

Answer 1

这将取决于浏览器的默认样式表。您可以查看（非官方的）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

现在，所有现代浏览器都有相同的默认值。

- Donut

---

HTML 4 推荐使用的 H6 字号被忽略了，0.67em 成为了主流；现在 WebKit 和 FF 使用与 IE8 相同的 em 大小。http://www.w3.org/TR/html-markup/h6.html 还指出“典型”的显示大小为 0.67em。 - Beni Cherniavsky-Paskin

这背后有什么理由，还是只是某个随机的人说“这些尺寸应该有标题”？ - rzb

更新答案以包括HTML5默认值是个好主意。 - Moha the almighty camel

在这里查看HTML5的相关内容：https://www.w3.org/TR/html5/rendering.html#sections-and-headings - Allison

@BeniCherniavsky-Paskin，链接已经失效了，请您能否发布一个新的链接？ - kuldeep

https://www.w3.org/TR/2017/REC-html52-20171214/rendering.html#sections-and-headings - Abram

Answer 2

标题通常是加粗的；这里为了展示大小对应关系而关闭了加粗效果。MSIE和Opera将这些大小解释为相同，但请注意，Gecko浏览器和Chrome将标题6解释为11像素而不是10像素/字号1，将标题3解释为19像素而不是18像素/字号4（尽管在直接比较中很难看出区别，在使用中则不可能）。似乎Gecko还将文本限制在不小于10像素。

- Sujit Agarwal