在画布文本和 html 元素之间共享基线

Question

我正在为 HTML canvas 元素绘制一些文本，在该文本旁边有一个纯 CSS 样式且绝对定位的 HTML 按钮，其位置由 JavaScript 计算。我想为两者使用相同的字体，这似乎很容易，而且我还希望两者共享相同的基线。据我所知，目前这真的很难，至少考虑到我面临的一系列限制。

• 开箱即用，画布绘制的文本使用textBaseline = 'alphabetic'，我无法更改它（出于兼容性原因并使用画布中的不同字体获取基线对齐的文本）。另一方面，HTML 元素上的绝对定位使用顶部或底部边距，而不是基线。
• TextMetricsMDN 上的文档描述了各种垂直测量，但指出它们仅在 Chrome 上可用，甚至只有在设置了一些标志后才能使用。我需要一些可以在当前浏览器的相当比例（比如 >80%）上工作的东西。
• 我不知道将使用什么字体，所以硬编码一些关于字体的度量信息不是一种选择。

那么我有哪些选择呢？

1. 我是否必须将字体渲染到第二个屏幕外画布并检查其像素数据才能找到实际尺寸？我什至可以相信这些根据画布上标记像素计算的实际尺寸与用于计算按钮大小的尺寸相匹配，即使对于某些更具艺术性的字体也是如此？

2. 我需要求助于间隔图像吗？顺便说一下，我的问题和那个问题之间的主要区别可能是我在 JavaScript 中进行定位，所以我不需要纯 CSS 解决方案，我可以使用画布可以提供的帮助。

3. 是否有其他（即没有间隔图像）方法来利用vertical-alignCSS 属性，通过创建一些具有明确基线的外框，然后将按钮嵌套在与相同基线对齐的内部？

4. 我可以采取任何其他方向吗？

Answer 1

您可以补充说，根据不同浏览器的文本渲染引擎，指标会略有不同。

如果没有低级指标，文本很难并且不容易得到正确的结果。正如您所说，它们目前仅在 Chrome 中以实验性标志提供。

4. 我还能采取其他方向吗？

您可以手动读取和解析字体并从中获取指标。有一个 (Font.js)解决方案以及一个 (OpenType.js)可以帮助做到这一点。这反过来又会限制您可以使用的字体类型。

另一种方法是使用第二个画布元素简单地创建按钮。您仍然可以接收点击事件等，但现在您的字体条件将与主画布中的字体条件相同。