如何在 Javascript 中获取字体/字形指标详细信息？

【问题标题】：How to get font/glyphs metrics details in Javascript?如何在 Javascript 中获取字体/字形指标详细信息？
【发布时间】：2017-09-09 02:16:18
【问题描述】：

我搜索了一种通过 javascript 获取有关字体和字形的详细参数的方法，以便为非等宽字体创建适当的 WebGL“字体”。

我认为我要寻找的东西不存在，但我问是因为从未有人知道。

实际问题如下：对于等宽字体，一切都很容易，因为字符（字形）之间的空间对所有人来说都是相同的。但是对于大多数常见的字体，这个空间是可变的。使用 OpenGL，为了正确创建非等宽字体，我使用了 FreeType 库，它提供了为每个字形设置正确的右移（前进宽度）所需的所有内容......但是在 Javascript 中如何获取他的数据简单快捷的方法？

【问题讨论】：

标签： javascript fonts metrics glyph

【解决方案1】：

目前你能做的最好的是https://www.w3schools.com/tags/canvas_measuretext.asp

【讨论】：

好的，谢谢，我就是这么想的。我将检查通过这种方式可以实现的目标。
终于很容易地完成了这个技巧（比我预期的要多）。 'measureText' 方法根据字形指标为每个字符返回可靠且精确的大小，从而允许为等宽字体和比例字体构建一个具有正确参数的表格。
这种方法至少有一个问题：没有字距调整对。 “AV”、“To”等字符对看起来很糟糕。
确实如此。老实说，即使使用 FreeType，我也从未想过这个细节。然后，这并不完美，但对于显示文本不是基本关键功能的 3D 应用程序来说已经足够了。无论如何，如果想以有效的方式在 OpenGL/WebGL 的艺术规则中绘制文本，可能会使用一种比旧的字体映射技术更精细和自定义的技术。
实际上，您目前能做的最好的事情是 opentype.js，而不是浏览器 API。