在JavaScript中获取字体度量信息？

Question

我目前正在从事一个JavaScript项目，该项目使用HTML5画布作为渲染目标。为了使我的代码与我提供的（严格规定的）接口配合得好，我需要能够获取字体的上升和下降高度。这将允许客户更准确地定位文本。我知道可以通过设置textBaseline属性来更改文本的绘制位置，但我实际上需要描述这些不同高度的数字值。是否有简单的方法来做到这一点？如果没有，是否有一个（希望轻量级的）库可以帮我处理？我找到的大多数提议解决方案都是重量级字体渲染库，这似乎对这个问题来说是完全不必要的。

- templatetypedef

---

Mozilla的Bespin试图解决这个问题，最终得出结论：画布并不是为文本编辑器而设计的。因此，要么依赖于'm'具有相同的高度和宽度，要么使用Bespin的源代码或下面描述的像素测试方法，或者测量一个带有相同文本/字体的离线div或任何其他不可靠的近似值。抱歉，我也不喜欢幻想破灭。但你确定选择了正确的方向吗？ - Torsten Becker

我目前正在使用JavaScript实现JVM，并将canvas作为渲染目标。我需要实现Java字体库，这就是我需要这些精确值的原因。我考虑采用Simon的答案，通过写入屏幕外并从结果中提取像素来伪造实现。 :-( - templatetypedef

我希望你已经考虑了字体平滑处理... - Torsten Becker

@templatetypedef 这个问题回答晚了吗？我有解决方案。ctx.measureText("text").width。我认为是这样的。如果你还需要，我会再次确认它。 - Ryan Amos

@Ryan Amos- 我知道这个解决方案，但它仅计算文本的宽度，而不是我实际需要的高度、字体上升和下降值。谢谢！ - templatetypedef

@templatetypedef 我非常确定 .height 会给你高度。至于其他的，我不知道它们是什么或者是否可以检索到它们。 - Ryan Amos

Answer 1

这篇关于HTML5排版度量的文章讨论了问题和一种使用CSS的部分解决方案——尽管offsetTop等整数舍入可能是一个问题（在某些浏览器中可以使用getBoundingClientRect()获取正确的浮点值）。请参见此文章以获取更多信息，以及此链接以了解使用CSS的部分解决方案。

- robocat

Answer 2

简短回答是，没有内置的方法，你有点自己摸索。

因此，大多数人只是估计它们。有些人预先计算所有值，这不需要太多工作，前提是你只使用了几种字体。

第三种方法是在内存中创建一个画布并打印一些字母（比如一个 Q 和一个 O），然后通过逐像素的碰撞来尝试编程确定上升和下降。这很麻烦，根据字体数量和你想要的精度，速度可能会很慢，但如果你不想预先计算值，这是最准确的方法。

- Simon Sarris

Answer 3

这里只是一个参考： 文本的宽度可以通过以下方式进行测量：

ctx.measureText(txt).width

http://www.w3schools.com/tags/canvas_measuretext.asp

- Damocles