时间戳

首页 > 解决方案 > 来自自定义 png base64 的动态字体

dom - 来自自定义 png base64 的动态字体

问题描述

我有一个 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 如何在没有一些描述符文件的情况下识别位图字体，但还没有看到任何示例。

这甚至应该工作吗？

谢谢！

标签： domdynamicbase64stylesfont-face

解决方案

为此，Angular 可以与 PixiJS（最新版本）集成，它会加载自定义位图字体，如下所示：

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 类型的对象。

推荐阅读