如何在 JavaScript 中获取渲染的字体？答案

【问题标题】：How to get the rendered font in JavaScript?如何在 JavaScript 中获取渲染的字体？
【发布时间】：2020-01-11 04:16:37
【问题描述】：

Google Chrome 在 DevTools 中显示渲染的字体。

例如，给定：

font-family: Montserrat, Helvetica, sans-serif;

并且Montserrat 字体丢失/禁用，Chrome 告诉我们Helvetica 正在呈现：

有没有办法在 JavaScript 中获取渲染的字体？（即使它只适用于 Chrome）

注意事项：

This solution 建议 getComputedStyle(...).fontFamily，但它返回 CSS 声明 "Montserrat, Helvetica, sans-serif"，而不是实际呈现的字体。
This solution 使用 puppeteer，但我不知道如何完全在 DevTools 中实现相同的功能（没有 puppeteer）。

【问题讨论】：

@julien-cabanes 的解决方案怎么样：jsfiddle.net/JulienCabanes/ubzrmmy5
据我所知，这是不可能的。但该信息是几年前的，所以它可能已经改变了。
@TemaniAfif 我在那里找不到可靠的答案。
不确定是否存在这样的解决方案，您只会找到 hack 和解决方法。在所有情况下，问题都是重复的。如果有新的准确解决方案，它应该去那里。您可以考虑在那里添加赏金。
重复stackoverflow.com/questions/7444451/… 不知道为什么重新打开...

标签： javascript html css google-chrome

【解决方案1】：

仍然无法从 Web-API 访问此信息。

Houdini 小组正在讨论是否包含 font-metrics API，应该包含类似的内容，但它甚至还没有作为规范草案提出，并且在路上会有很多负担。

正在使用什么字体？这很复杂，因为每个段落、每行、每个单词甚至每个字形都可以使用多种字体。字体应该以具有完整字体信息的句柄和（对于网络字体）原始字体数据的句柄的形式公开。 dbaron 和 eae 将拥有该领域并提出 API。

确实，一种字体可以用于字形 ̂ (U+0302)，另一种字体用于字形 a (U+0061)，这将使组合字形 â 实际上使用两种不同的字体字体。

当前的讨论似乎指向Font interface 可从document.measureElement 和document.measureText 方法获得。该接口将公开两个属性：一个 DOMString name 和一个数字 glyphsRendered。然而，这些仍然是讨论，还没有作为草案提出，还有很多讨论要做，我不会屏住呼吸等待它很快在任何地方实施。

现在，有一些技巧，比如numerous other Q/A already told _{^{不要坚持那里接受的答案}}，这意味着查看渲染的大小是最简单的，并且查看渲染像素以获得更高级的像素，但作为黑客，它们不会在所有情况下都有效。
例如，我可以在我的系统上有一个自定义字体，它只会呈现从知名字体借来的一些字符，没有这样的黑客能够判断浏览器是否回退到该字体或实际的知名字体。

确定的唯一方法是保持控制并使用网络字体。

【讨论】：