html - CSS:字体大小不准确吗？

Question

所以，link和 link提供有关字体如何依赖于实现的提示。
在以下情况下，此问题非常特定于字体大小:

字体大小:50px； 将需要额外的空间来渲染(在我的情况下为 60px)

div {
  height: 50px;
  font-size: 50px;
  background: green;
}

span {
  background: red;
}

.lineheight {
  line-height: 50px;
}

<p>Green is 50px, Red is not</p>
<div><span>fg</span></div>

<p>You can still see the overflow without span:</p>
<div>jAaMgÁ</div>

<p>line-height does not solve the issue (just makes it prettier)</p>
<div class="lineheight"><span>jAaMgÁ</span></div>

我期望发生的是:em 正方形内的上升和下降

我得到的是:下降器被绘制在 em 广场之外。

来自文档 link :“字体大小对应em方块”

从这个引用 em 正方形应该包括下降和上升:

那么为什么浏览器会做其他事情呢？我尝试了 Firefox 和 Chrome，两者似乎都与这种(错过？)行为一致……规范是否发生了变化？如果是这样， 告诉浏览器字体高度(包括下行和上行)的适当方法是什么？

(宽度可以忽略，你可以自由使用CSS4，但感谢CSS3)

Answer 1

默认line-height高于font-size ，这就是为什么 span在您的示例中高于 50px。如果您设置 line-height至 1或 100% ，您会看到 span具有与 div 相同的“真实”高度: 50 像素。 “A”上的重音只是超过 100% 的行高并超出字体大小，作为补充/异常(exception)。

div {
  height: 50px;
  font-size: 50px;
  line-height: 1;
  background: green;
}

span {
  background: red;
}

Green and Red are 50px high, with line-height 100%:
<div><span>jAaMgÁ</span></div>
The only thing that overflows is the accent on the "A" (and the very first letter "j", but to the left...):
<div>jAaMgÁ</div>