浏览器如何确定字体基线位置

Question

如果我使用两种字体，100px大小并将它们放在页面上，则它们在公共基线上对齐。此基线似乎距离顶部约80px（尽管每个浏览器可能会有所不同 - 另一个问题）。

如何计算此基线？我读过如下建议：

• 字体大小的2/3（只是粗略估计）
• ascender（错误）

这两种字体都有不同的上升，但基线是相同的 - 通过查看OpenType.js字体浏览器确认 - 字体只有不同的yMax / yMin。

顶部的图片是我的浏览器，而指标的图片是OpenType.js。它们都显示出共同的基线。在opentype中，他们手动设置基线，然后添加ascender / descender。

浏览器如何确定在哪里设置100px字体的基线？因为我在Safari和Chrome中看到了~10px差异，我很想知道为什么 - 他们使用不同的方法，我在哪里可以找到所有常见浏览器的资源。

我理想情况下想要一些可用于以编程方式确定此问题的JavaScript。没有一些可能有帮助的OpenGlyph数据，我将根据浏览器进行调整。我看过OP字体数据而没有看到任何信息，像getBoundingBox这样的东西似乎没有返回我需要的数据（在上面的例子中，我得到一个最高值为5，高度为115.