在 JavaScript 中获取字体规格？

Question

我目前正在开发一个使用 HTML5 画布作为渲染目标的 JavaScript 项目。 为了使我的代码能够很好地与我提供的（严格指定的）接口配合使用，我需要能够获取一种字体并提取该字体的上升和下降高度。 这将使客户能够更准确地定位文本。 我知道我可以通过设置

textBaseline

属性来更改文本绘制的位置，但实际上我需要描述这些不同高度的数值。 有没有一种简单的方法可以做到这一点？ 如果没有，是否有一个（希望是轻量级的）库可以为我处理它？ 我发现的大多数建议的解决方案都是重量级字体渲染库，这对于这个问题来说似乎是巨大的杀伤力。

Answer 1

这篇关于 HTML5 印刷指标的文章讨论了这个问题以及使用 CSS 的部分解决方案 - 尽管 offsetTop 等的整数舍入是一个问题（可能可以使用

getBoundingClientRect()

为某些浏览器获取正确的浮点值）。

Answer 2

简短的回答是，没有内置的方法，你只能靠自己。

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

第三种方法是在内存中制作画布并打印一些字母（例如，

Q

和

O

），并以编程方式尝试使用每像素碰撞来确定上升和下降。这是一种痛苦，并且可能会很慢，具体取决于字体的数量以及您想要的准确程度，但如果您不想预先计算值，那么这是最准确的方法。

Answer 3

仅供参考： 文本的宽度可以通过以下方式测量：

ctx.measureText(txt).width

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

Answer 4

对于宽度和高度，你可以尝试这个：

let txt="AVA BC efg hij IÍ";
let measure=ctx.measureText(txt);
let width=measure.width;
let fullHeight=measure.fontBoundingBoxAscent+measure.fontBoundingBoxDescent;
let ascentHeight=measure.fontBoundingBoxAscent;

宽度值处理字母之间所有可能的字距调整。 （即 AVA）ascentHeight 将从绘制文本的基线到最高大写字母的高度进行测量。并且fullHeight可以覆盖从最大字母到小写“g”和“j”。