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

Question

GoogleChrome在DevTool中显示渲染字体。

例如，给出：

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

Chrome告诉我们，

Montserrat

正在渲染：

有一种方法可以在JavaScript中获取渲染字体吗？ （即使它只是在Chrome中起作用）

注：

---

该解决方案建议Helvetica

，但它返回CSS声明

getComputedStyle(...).fontFamily
1. ，而不是实际渲染字体。 this this解决方案使用uppeteer，但我无法弄清楚如何纯粹在DevTools（没有木偶）中实现相同的方法。

   仍然无法从Web-apis访问此信息。
   
   Houdini集团中正在进行的讨论中，关于包括

   font-MetricsAPI
的讨论，应该包括类似的内容，但它甚至没有作为规格草案提出，并且在路上会有很多负担。
2. 正在使用什么字体？这很复杂，因为每个段落可以使用多个字体，每个行，每个单词甚至每个字形。该字体应以带有完整字体信息的手柄的形式曝光，并（对于Web字体）将原始字体数据的句柄曝光。 Dbaron＆Eae将拥有此区域并提出API。

表示，一张可以为字形

Answer 1

（u+0302）带有一种字体，而glyph

̂

（u+0061）的另一种则可以使组合的字形

a实际上使用两种不同的字体。

电流的讨论似乎指向

â

和

document.measureElement

方法可用的

font接口

。该接口将公开两个属性：domstring

document.measureText

和一个数字

name

。
但是，这些仍然是讨论，但仍未提议作为草稿，仍有很多讨论要进行，我不会在任何时候在任何时候在任何地方实施我的呼吸。

现在，有hacks，例如其他已经告诉的Q/a已经说过

不坚持在那里接受的答案

，这意味着要查看渲染的尺寸，以查看最简单的像素，而是为更高级的像素而言，但在所有情况下都无法入侵。
例如，我的系统上可以使用一种自定义字体，该字体只会渲染一些从众所周知的字体借来的字符，没有这样的黑客能够分辨出浏览器是否确实会后备到该字体或实际知名的字体。

确定知道的唯一方法是保持控制和使用Web-font。

update3/15/2025

下面的建议在2024年初起作用，但不再。
如果我想出一个新的片段，我会更新。

由于还没有人建议，还有一种方法可以找出哪种字体呈现。

---

下面的摘要获取用于该元素的字体家庭CSS定义（或当然可以在需要的情况下进行编码的字体 - 家庭名称）并按顺序进行检查，是否已加载字体家族并返回第一个已加载的字体家族的名称。 the font font-fominy css属性指定了一个或多个字体家族名称的优先列表，因此第一个可用字体很可能也是渲染字体。 摘要使用CSS字体加载API，该API得到了很好的支持（但当然不是IE）

https：//developer.mozilla.org/en-us/docs/web/api/css_font_loading_api _{，例如，让我们想象CSS是： glyphsRendered}
Snippet

.body { 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Adjusted", "Segoe UI", "Liberation Sans", sans-serif;
}

Answer 2

const getRenderedFontFamilyName = ( element ) => {
    // Font families set in CSS for the element
    const fontFamilies = window.getComputedStyle( element, null ).getPropertyValue( "font-family" );
    // const hardcodedFamilies = '-apple-system, BlinkMacSystemFont, "Segoe UI Adjusted", "Segoe UI", "Liberation Sans", sans-serif';
    
    // Remove the " sign from names (font families with spaces in their names) and split names to the array
    const fontFamiliesArr = fontFamilies.replaceAll('"', "").split(", ");

    // Find the first loaded font from the array
    return fontFamiliesArr.find( e => document.fonts.check( `12px ${e}`) );
}

---