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

Question

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

例如，给定：

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

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

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

---

笔记：

1. 此解决方案建议getComputedStyle(...).fontFamily，但它返回 CSS 声明"Montserrat, Helvetica, sans-serif"，而不是实际呈现的字体。
2. 此解决方案使用 puppeteer，但我无法弄清楚如何纯粹在 DevTools 中实现相同的目标（没有 puppeteer）。

Answer 1

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

\n\n

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

\n\n

\n

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

\n

\n\n

事实上，可以为字形\xcc\x82(U+0302) 使用一种字体，为字形 a(U+0061) 使用另一种字体，这将使组合字形a\xcc\x82实际上使用两种不同的字体。

\n\n

当前的讨论似乎指向可通过和方法获取的Font 接口。该接口将公开两个属性： DOMString和 number 。\n但是，这些仍然处于讨论阶段，尚未作为草案提出，仍有大量讨论需要进行，我不会屏住呼吸等待以便它能很快在任何地方、任何时间实施。document.measureElementdocument.measureTextnameglyphsRendered

\n\n\n\n

现在，有一些黑客，就像许多其他问答一样， _{^{不要坚持那里接受的答案}}，这意味着查看最简单的渲染大小，并查看渲染像素以获得更高级的像素，但是作为黑客，它们不会在所有情况下都起作用。
\n例如，我的系统上可以有一种自定义字体，它只会呈现从知名字体借用的一些字符，这样的黑客无法判断浏览器是否回退到该字体或实际的知名字体。

\n\n

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

\n