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

rst*_*rim 99 html css frontend

我一直不确定从哪里开始作为一般的最佳实践基线.是的,我知道这取决于你的设计 - 但最常见的是什么?

这是我目前作为首发者所拥有的:

h1 { font-size: 24px;}
h2 { font-size: 22px;}
h3 { font-size: 18px;}
h4 { font-size: 16px;}
h5 { font-size: 12px;}
h6 { font-size: 10px;}
Run Code Online (Sandbox Code Playgroud)

是的,我目前的工作不使用EMs.

谢谢

Don*_*nut 208

这取决于浏览器的默认样式表.您可以在此处查看 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
Run Code Online (Sandbox Code Playgroud)

另外值得一看的是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; }
Run Code Online (Sandbox Code Playgroud)

希望这些信息有用.

  • H6的HTML 4推荐被忽略,0.67em赢了; 现在,WebKit和FF使用与IE8相同的`em`尺寸.http://www.w3.org/TR/html-markup/h6.html也说"典型"显示为0.67em. (3认同)
  • 这里是 HTML5 的 https://www.w3.org/TR/html5/rendering.html#sections-and-headings (2认同)