如何使用 Javascript 中的 Fetch API 加载 ttf-fontfiles？

Question

因此，我目前正在开发 Javascript 游戏，并希望使用 Fetch API 同步加载必要的资源。因此加载图像、声音文件、脚本和样式表都没有问题。但是，当我将 CSS 文件等文件作为 blob 加载到网站中时，这些文件中通过 font-face-tag 定义的字体不会加载。那么有没有办法解决这个问题，或者我是否必须以旧的方式包含样式表来解决问题，只需将链接标签放在头块中？

以下是我如何使用 Fetch API 加载 CSS 文件的示例：

fetch(filePath).then((r) => {
    return (r.blob());
}).then((content_) => {
    let sheetURL = URL.createObjectURL(content_);

    const element = document.createElement("link");
    element.rel = "stylesheet";
    element.type = "text/css";
    element.href = sheetURL;
    document.body.appendChild(element);
});

这本质上应该做的是预加载文件，然后将其作为标签添加到正文中：

fetch(filePath).then((r) => {
    return (r.blob());
}).then((content_) => {
    let sheetURL = URL.createObjectURL(content_);

    const element = document.createElement("link");
    element.rel = "stylesheet";
    element.type = "text/css";
    element.href = sheetURL;
    document.body.appendChild(element);
});

正如我所说，包含内容的样式表已加载并使用，但通过 font-face 标记定义的字体将被忽略。

Answer 1

我发现这个API允许您下载字体：https://github.com/majodev/google-webfonts-helper#get-apifontsiddownloadzipsubsetslatinformatswoffwoff2variantsregular

首先发送请求到（例如）：“https://google-webfonts-helper.herokuapp.com/api/fonts/modern-antiqua?subsets=latin,latin-ext”；

然后从响应中获取 ttf url，如下所示：

var json = JSON.parse(response);
const ttfFont = json.variants[0].ttf;

并向该 URL 发送新请求。