是否可以将 FontFace API 与 Google 字体一起使用？答案

【问题标题】：Is it possible to use FontFace API with Google Fonts?是否可以将 FontFace API 与 Google 字体一起使用？
【发布时间】：2022-07-21 17:21:56
【问题描述】：

我正在编写一个需要在运行时动态加载字体的应用程序。我正在使用与这个问题无关的 RXJS，只是为了广泛地描绘我的用例。

在找到依赖项之前，我查看了MDN FontFace API，这似乎完全符合我的需求。不要与难以搜索信息的 css 混淆。

最终，我们使用的是 Google 字体，因此最初使用 index.html 页面上的样式表设置字体。

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@900&display=swap" rel="stylesheet">

如果你点击那个font link

您最终会被带到一个 CSS 文件，该文件依次列出了许多实际字体。例如，这里只是列出的其中之一：

/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmYUtfBBc4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

为了使用FontFace API，我需要访问源代码。

const fontFace = new FontFace("Roboto", "url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmYUtfBBc4.woff2)");

问题：

Google 是否为 Javascript 提供类似的服务，以便我可以查询它以获取我需要的信息？

一个不存在的愚蠢例子：

https://fonts.googleapis.com/js?family=Roboto:wght@900&display=swap

感谢阅读。

【问题讨论】：

developers.google.com/fonts/docs/developer_api 存在，但它一次性为您提供所有可用字体的数据，没有额外的过滤可能性 - 所以您只需要获取数据那么你需要的字体。
在第二次阅读您的问题时，您打算用 FontFace API 到底做什么？

标签： javascript google-fonts

【解决方案1】：

为了使用 FontFace API，我需要访问 src。

不，你不需要，你也可以通过 CSS 获取字体的 FontFace 对象。

您可以通过document.fonts.ready返回的FontFaceSet访问它。

(async () => {
  const fontFaceSet = await document.fonts.ready;
  const it = fontFaceSet.values();
  let res = it.next();
  while (!res.done) {
    const font = res.value;
    console.log(font instanceof FontFace, font);
    res = it.next();
  }
})();

@import "https://fonts.googleapis.com/css2?family=Roboto:wght@900&amp;display=swap";

【讨论】：