在JavaScript中获取字体指标？

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

来源

2011-05-28 templatetypedef

Mozillas贝斯平试图解决这一问题，终于碰上与结论帆布结束的说法：文本的宽度可以与测量曾经并将永远不会为文本编辑器设计。因此，要么依靠具有相同高度和宽度的'm'，要么使用Bespin的来源或下面描述的像素测试方法，或者使用相同的文本/字体或任何其他不可靠的近似来测量关闭div。对不起，也不喜欢幻想破灭。但是你确定你为这条道路选择了正确的马？ – noiv 2011-05-29 23:10:40

我目前正在研究JavaScript中的JVM实现，并将画布作为渲染目标。我需要实现Java字体库，这就是为什么我需要这些精确的值。我在想，我会用西蒙的答案去解决问题，并通过写出屏幕外像素和像素刮取结果来伪造实现。 :-( – templatetypedef 2011-05-29 23:53:19

我希望，你已经考虑了字体平滑处理...... – noiv 2011-05-30 00:05:41

HTML5的印刷度量This article讨论的问题和part solution using CSS - 虽然的offsetTop等的整数四舍五入是一个问题（可能可以使用getBoundingClientRect()得到正确的浮点值，一些浏览器）。

来源

2012-06-29 03:52:48 robocat

简短的回答是，没有内置的方式，你是自己排序。

因此，大多数人只是简单地估计它们。有些人会预先计算所有的值，如果您只使用几种字体，那么这些值不会太多。

第三种方法是在内存中制作一个画布并打印一些字母（例如，Q和O）并以编程方式尝试使用每像素碰撞来确定上升和下降。这是一种痛苦，可能会很慢，具体取决于字体的数量和想要的准确度，但如果您不想预先计算这些值，则它是最准确的方法。

来源

2011-05-29 16:46:37

就像这里一个参考：

ctx.measureText(txt).width

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

来源

2015-11-07 06:27:49 Damocles

在JavaScript中获取字体指标？

回答

相关问题