Question

调整em中元素的大小不会随着字体类型而改变，就像它为ex或ch大小改变一样。即使是强硬的不同字体类型也有不同大小的＆＃39; M＆＃39;。

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

有关详细信息，请参阅此fiddle。您可以注意到ch和ex的不同Div大小具有相同的宽度大小但字体类型不同，但对于em来说则不一样。

Answer 1

在CSS中，所有尺寸都与“绝对长度单位”（px，in，cm，mm，pt，pc）相关，默认为像素（在CSS3中指定为1英寸的1/96）。 / p>

您引用的三个单位是字体相对长度，因此您会认为它们与字体维度直接相关，但em的关联方式不同。

ex和ch对于字体特性是唯一的，但em是通过元素的继承字体大小来衡量的（通常是“绝对长度单位” - 通常参考像素单位。）

em unit ：等于使用它的元素的'font-size'属性的计算值（1.2em比特定或继承的字体大小大20％..总是在“绝对长度单位”中。

更改font-family时单位长度不会改变，因为em基于字体大小 - 总是基于“绝对长度单位”。 如果未指定字体大小，则默认值为16px。

ex unit ：等于第一个可用字体的已用x高度，一个单位的值对于该字体是唯一的。所谓的x高度是因为它通常等于小写“x”的高度。但是，即使对于不包含“x”的字体，也会定义“ex”。我认为这不是一个有用的案例。

ch unit ：0（零）字符的宽度 - 与ex测量一样随意。

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

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

Answer 2

em单位，definition，表示字体的大小，或者更具体地说，是font-size属性的计算值。它通常被认为是指字体的高度，这是正确的，正确理解。它通常被称为字母“M”的宽度，但事实并非如此;每个字母的宽度由印刷师决定，实际上，“M”通常比字体大小窄，如一个简单的实验所示：

＆＃13;

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

＆＃13;

因此，em单位仅取决于字体大小，而不取决于字体系列，样式等。字体大小。

ex单位被定义为等于没有上升和下降的小写字母的高度。这实际上是一个循环定义;上升是超出x高度的东西。在排版中，x高度是字体的基本属性之一，是字体设计的一个特征，而ex单位是为了反映这一点，并且对于不同的字体是不同的。但是，许多浏览器只将ex实现为字体大小的一半，即等于0.5em，这使得ex单元变得毫无用处。

ch单位定义为等于数字0的宽度。它的名字反映了这是“平均字符宽度”的合理近似的想法。但无论如何，单位的价值预计会根据字体而变化，而且确实如此。

为什么em字体大小不会随字体类型而改变？

2 个答案: