相关疑难解决方法(0)

我希望能够使用javascript在div中找到一段文本的基线高度.

我不能使用预定义的字体,因为我的许多用户将在浏览器中使用更大的字体设置.

我怎么能用javascript做到这一点？

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

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

那么我有哪些选择呢？

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

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

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

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