Geek Answers Handbook

Why em font size does not change with font type?

The size of an element in em does not change with the type of the font, as it changes for ex or ch. Even hard different types of fonts have different sizes of "M".

<div id="em1">Font Serif with em as units</div>
<div id="em2">Font Sans-Serif with em as units</div>

<div id="ex1">Font Serif with ex as units</div>
<div id="ex2">Font Sans-Serif with ex as units</div>

<div id="ch1">Font Serif with ch as units</div>
<div id="ch2">Font Sans-Serif with ch as units</div>
body {
  padding: 20px;
}
#em1,#em2 {
  width: 25em;
  height: 40px;
  background: orange;
  margin: 20px;
}
#ch1,#ch2 {
  width: 50ch;
  height: 40px;
  background: orange;
  margin: 20px;
}
#ex1,#ex2 {
  width: 50ex;
  height: 40px;
  background: orange;
  margin: 20px;
}

#em1, #ex1, #ch1{
  font-family: Serif; 
}

#em2,#ex2,#ch2 {
  font-family: Sans-Serif;
}

Refer to this fiddle for more information. You may notice different Div sizes for ch and ex with the same width size but with a different font type, but this is not the case for em.

+4
source share
2 answers

In CSS, all dimensions are associated with “units of absolute length” (px, in, cm, mm, pt, pc) and the default pixel is (which is specified in CSS3 as 1 / 96th of 1 inch).

, , , , , em -.

ex ch , em ( " " - ).

em unit: font-size , ( 1.2em 20% ... " " ).

, em , " ". , - 16 .

ex unit: x , . - , "x". , "ex" , "x". , .

ch unit: 0 () - ex.

http://www.w3.org/TR/css3-values/#absolute-lengths

http://www.w3.org/TR/css3-values/#em-unit

+4

em, , , , font-size . , , , . "", ; , "" , , :

<div style="width: 1em; height: 1em; outline: solid red">M</div>
Hide result

, em , , .. .

ex . ; - , x-height. x-height , , ex . , ex , .. 0.5em, ex .

ch 0. , " ". , , .

+1
source

More articles:


All Articles