是否有一种与字体无关的方法可以将 em 转换为字体高度？

Question

运行以下代码片段：

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。这是一种产品字体文件格式，还是只针对这一种字体？

Answer 1

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

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

是否有一种与字体无关的方法可以将 em 转换为字体高度？

Is there a font independent way to translate from em to font height?

css

font-size