html - 浏览器将字体基线放置在文本行的哪个位置或字体系列如何影响跨度高度？

Question

我注意到字体系列在其中扮演了某种角色。但是什么确切的字体度量？

在下面的代码片段中，浏览器对具有不同字体系列的两个 span 的处理方式非常不同。

<div style="border-style: dotted; border-color: green; overflow: hidden;">
  <div style="float: left;">
      <span style="font: bold 50px/100px Droid Sans; border-style: dotted; border-color: blue;">Agjq)],Ee`</span>
  </div>
  <div style="float: left">
      <span style="font: bold 50px/100px Sans; border-style: dotted; border-color: blue;">Agjq)],Ee`</span>
  </div>
</div>

我了解到，要在一行中定位一个跨度，浏览器会获取行高和跨度高度之间的差异，然后将其除以 2 以获得领先大小。然后，它将跨度顶部置于线顶部下方。跨度底部是线底部上方的前导。换句话说，跨度位于行的中间。

现在的问题是：什么字体度量会影响跨度高度？

标签： htmlcssgoogle-chromefirefoxbrowser