What are the default font sizes (in pixels) for the html heading tags (

,

,

, etc.)?

后端 未结 4 1856
北海茫月
北海茫月 2021-01-31 09:11

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

相关标签:
4条回答
  • 2021-01-31 09:33

    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).

    0 讨论(0)
  • 2021-01-31 09:37

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

    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:

    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;
    }
    
    0 讨论(0)
  • 2021-01-31 09:39

    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)
    
    0 讨论(0)
  • 2021-01-31 09:39

    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.

    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.

    0 讨论(0)
提交回复
热议问题