使用字体的实际像素高度将文本与CSS垂直对齐？

Question

我需要在图像中间垂直居中文本，但我使用的自定义字体有非常大的上升和下降（即字母的部分突出很多），因此垂直对齐不是同样适用于所有可能的角色。

例如，查看字符X和g之间的对齐差异：

我知道这是因为字体的“基线”而不是我的问题所在。

我想知道是否可以使用字体的实际像素值垂直对齐文本字符串，而不是依赖于“边界框”或容器的行高 - 例如，使用绿色边界对齐下面：

因此，使用上面的例子，单个字符X和g将完美地居中显示如下：

Answer 1

目前没有内置方法可以做到这一点。

函数measureText()返回一个TextMetric对象，specs定义了包含actualBounding*的所有必要值，但遗憾的是，只有width }该规范是included in the browsers。

有一个polyfill可能有助于克服这些限制，但我自己从未尝试过，也不能说它是否有好处。

最后一个选项是实际扫描线以找出每个角色的像素位置。它的工作效果取决于你需要渲染多少文本，如果不是太多，性能应该没问题。您基本上必须将每个字符写入屏幕外画布，然后从顶部和底部扫描以找出第一个像素分别出现的位置，并将其用作顶部和底部的实际边界框。