是否有一种独立于字体的方法可以将 em 转换为字体高度？答案

【问题标题】：Is there a font independent way to translate from em to font height?是否有一种独立于字体的方法可以将 em 转换为字体高度？
【发布时间】：2021-10-27 14:56:12
【问题描述】：

运行以下代码sn -p：

span.text {
  border: 1px solid blue;
  line-height: 1;
}

span.box {
  display: inline-block;
  border: 1px solid red;
  height: 1em;
}

span.true-height {
  display: inline-block;
  height: 1.2em;
  width: 1em;
  background: green;
  vertical-align: text-bottom;
}

<span class="text">This box is taller than 1em</span>
<span class="box">1em</span>
<span class="true-height"></span>

您会注意到两个跨度的高度不同。只包含文本（line-height: 1）的跨度大于 1em。

字体之间的“真实字体高度”和em的差异是否一致？在上面的例子中，“真实字体高度”是1.2em。这是一种产品字体文件格式，还是仅针对这种字体？

【问题讨论】：

line-height 计算整个字体高度，height 忽略字体的实际高度。通过同时选择 .text 和 .box 可以看到相同的结果。选择从.box 中的框中溢出。
相关：stackoverflow.com/q/55978130/8620333

标签： css font-size

【解决方案1】：

没有。 CSS 规范指出，对于“正常”的初始行高，"Tells user agents to set the used value to a "reasonable" value based on the font of the element"

这意味着浏览器使用几个字体度量来选择文本的行高。不仅字体之间会有所不同，而且不同的浏览器可能会为相同的字体选择不同的行高。

【讨论】：