html 标题标签(<h1>、<h2>、<h3> 等)的默认字体大小(以像素为单位)是多少?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/5410066/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 07:32:22  来源:igfitidea点击:

What are the default font sizes (in pixels) for the html heading tags (<h1>, <h2>, <h3>, etc.)?

html

提问by DrStrangeLove

What are the default font pixel sizes for the heading (h1-h6) tags?

标题 (h1-h6) 标签的默认字体像素大小是多少?

回答by novacara

I think it is as follows:

我认为是这样的:

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

An em is not the same as a pixel. It is a relative way of looking at sizes. With that said I think most browsers default to 16px (or 1em).

em 与像素不同。这是查看尺寸的相对方式。话虽如此,我认为大多数浏览器默认为 16px(或 1em)。

回答by Sam Benson

Another way of putting it is:

另一种表达方式是:

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)

回答by Roman Holzner

For an actual proof, take a look at the html.css (171 - 237) with the default style of Mozilla Firefox:

对于实际证明,请查看具有 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;
}

The whole css is:

整个css是:

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;
}

回答by blackspacer

Size for h1 - h6 tags are different from browser to browser. There is no W3 spec that enforces standard size for heading tags. Each browser has implemented its own.

h1 - h6 标签的大小因浏览器而异。没有 W3 规范强制执行标题标签的标准大小。每个浏览器都实现了自己的。

It is recommended to use a CSS normalizer to make the sizes uniform across all the browsers. You can do this by defining your custom sizes for the tags to override the default browser values.

建议使用 CSS normalizer 使所有浏览器的大小统一。您可以通过定义标签的自定义大小来覆盖默认浏览器值来实现此目的。