标题(h1-h6)标签的默认字体像素大小是多少?
标题(h1-h6)标签的默认字体像素大小是多少?
另一种说法是:
h1 is 32px (2em)
h2 is 24px (1.5em)
h3 is 20.8px (1.3em)
h4 is 16px (1em)
h5 is 12.8px (0.8em)
h6 is 11.2px (0.7em)
我认为它应该是这样的:
h1 is 2 em
h2 is 1.5 em
h3 is 1.3 em
h4 is 1 em
h5 is 0.8 em
h6 is 0.7 em
em不等同于像素(pixel),它是一种相对于大小的方式。话虽如此,我认为大多数浏览器默认为16px(或1em)。
这是在浏览器默认样式表中设置的。截至2023年,现代浏览器都将这些设置为相同的em值。在现代浏览器中,默认情况下1em等于16像素,因此:
h1 | 2em | 32px
h2 | 1.5em | 24px
h3 | 1.17em | 18.72px
h4 | 1em | 16px
h5 | 0.83em | 13.28px
h6 | 0.67em | 10.72px
这些值是WhatWG的最新标准推荐的,我检查了Chrome、Firefox和Safari确实实现了这些值。
(请注意,h5和h6的值与HTML 4的默认样式表略有不同。)
最后,您可以运行以下代码片段并在您选择的浏览器中进行检查:
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
为了提供实际的证明,您可以查看 Mozilla Firefox 默认样式下的 html.css 文件(171-237 行):
h1 {
font-size: 2em;
}
h2 {
font-size: 1.5em;
}
h3 {
font-size: 1.17em;
}
h4 {
font-size: 1.00em;
}
h5 {
font-size: 0.83em;
}
h6 {
font-size: 0.67em;
}
h1 {
display: block;
font-size: 2em;
font-weight: bold;
margin-block-start: .67em;
margin-block-end: .67em;
}
h2,
:-moz-any(article, aside, nav, section)
h1 {
display: block;
font-size: 1.5em;
font-weight: bold;
margin-block-start: .83em;
margin-block-end: .83em;
}
h3,
:-moz-any(article, aside, nav, section)
:-moz-any(article, aside, nav, section)
h1 {
display: block;
font-size: 1.17em;
font-weight: bold;
margin-block-start: 1em;
margin-block-end: 1em;
}
h4,
:-moz-any(article, aside, nav, section)
:-moz-any(article, aside, nav, section)
:-moz-any(article, aside, nav, section)
h1 {
display: block;
font-size: 1.00em;
font-weight: bold;
margin-block-start: 1.33em;
margin-block-end: 1.33em;
}
h5,
:-moz-any(article, aside, nav, section)
:-moz-any(article, aside, nav, section)
:-moz-any(article, aside, nav, section)
:-moz-any(article, aside, nav, section)
h1 {
display: block;
font-size: 0.83em;
font-weight: bold;
margin-block-start: 1.67em;
margin-block-end: 1.67em;
}
h6,
:-moz-any(article, aside, nav, section)
:-moz-any(article, aside, nav, section)
:-moz-any(article, aside, nav, section)
:-moz-any(article, aside, nav, section)
:-moz-any(article, aside, nav, section)
h1 {
display: block;
font-size: 0.67em;
font-weight: bold;
margin-block-start: 2.33em;
margin-block-end: 2.33em;
}
浏览器中 h1-h6 标签的大小不同,没有任何 W3 规范来强制规定标题标签的标准大小。每个浏览器都有自己的实现。
建议使用 CSS normalizer 使所有浏览器中标题标签的大小统一。可以通过定义自定义大小来覆盖默认浏览器值来实现。