如何使用 Javascript 中的 Fetch API 加载 ttf 字体文件

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);
});

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

<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 网址，如下所示：

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

并向该 URL 发送新请求。