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

Question

Google Chrome 在 DevTools 中显示呈现的字体。

例如，给定:

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

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

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

---

注意事项:

1. This solution建议 getComputedStyle(...).fontFamily，但它返回 CSS 声明 "Montserrat, Helvetica, sans-serif"，而不是实际呈现的字体。
2. This solution使用 puppeteer，但我无法弄清楚如何完全在 DevTools 中实现相同的效果(没有 puppeteer)。

Answer 1

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

Houdini 组中正在进行关于包含 font-metrics API 的讨论。 ，那应该包括类似的东西，但它甚至还没有作为规范草案被提议，而且路上会有很多负担。

What font(s) are being used? This is complicated because multiple fonts can be used per paragraph, per line, per word, and even per glyph. The fonts should be exposed in the form of handles with complete font information, and (for web fonts) a handle to the raw font data. dbaron & eae are going to own this area and propose an API.

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

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

---

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

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