Dynami c font-face из кастомного png base64 - PullRequest
Новая
       122

Dynami c font-face из кастомного png base64

0 голосов
/ 08 июля 2020

У меня есть файл PNG с некоторыми буквами, который я создал сам, и я хотел бы использовать их в приложении Angular для отображения текста на экране. Я хочу загружать шрифт динамически, поскольку мое приложение создает его. Я придумал следующее решение, но оно не сработает и даже не выдаст ошибку: 

const nodeStyle = document.createElement('style');
    nodeStyle.textContent = `
    @font-face {
      font-family: 'dynamic-font';
      src: url(${pngBase64}) format(png);
      font-weight: normal;
      font-style: normal;
    }`;
    document.head.appendChild(nodeStyle);
    
    const nodeParagraph = document.createElement('p');
    nodeParagraph.style['font-family'] = "dynamic-font";
    nodeParagraph.innerHTML = this.inputText;
    document.getElementById("canvas").appendChild(nodeParagraph);

Мне интересно, как font-face распознает растровый шрифт без какого-либо файла дескриптора, но пока не видел ни одного примера.

Это вообще должно работать?

Спасибо!

1 Ответ

0 голосов
/ 10 июля 2020

Для этой цели Angular может быть интегрирован с Pixi JS (последняя версия), который загружает пользовательские растровые шрифты следующим образом: 

PIXI.BitmapFont.install(fontFile, fontPng);
    PIXI.BitmapFont.from("testFont", {
      fontFamily: "testFont",
      fontSize: 70
    });
    const title = new PIXI.BitmapText("This is the title", { fontName: "testFont" });

где fontFile должен быть создан как XMLDocument и fontPng - это объект типа PIXI.Texture.

...