Как я могу загрузить ttf-fontfiles, используя Fetch API в Javascript? - PullRequest
Новая
       15

Как я могу загрузить ttf-fontfiles, используя Fetch API в Javascript?

4 голосов
/ 13 июня 2019

Итак, я сейчас работаю над Javascript-Game и хочу загрузить необходимые ресурсы синхронно, используя Fetch API. Таким образом, загрузка изображений, звуковых файлов, скриптов и таблиц стилей не составляет проблемы. Но так как я загружаю файлы, такие как CSS-файлы, в виде больших двоичных объектов для включения в веб-сайт, шрифты в этих файлах, которые определяются с помощью тега font-face-tag, не загружаются. Так есть ли способ обойти эту проблему, или мне нужно включить таблицы стилей по-старому, чтобы решить проблему, просто поместив теги ссылок в головной блок?

Вот пример того, как я загружаю CSS-файлы, используя Fetch API: 

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, игнорируются.

...