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

Question

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

这是我如何使用 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);
});

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

<link type="text/css" rel="stylesheet" href="blob:http://127.0.0.1:4242/0089a94a-d580-4bc3-b808-78a11f2d45d4">

正如我所说，带有内容的样式表被加载并使用，但通过 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 发送新请求。