Pixijs:加载自定义字体

我当前正在学习PIXIJS。我浏览了这个家伙的教程：github.com/kittykatattack/learningpixi一个好，

环境：Xampp，Firefox，Pixijs，HTML，CSS

现在我尝试加载自定义字体。我第一次加载Pixijs项目应运行的页面时，字体未显示，控制台显示了一些错误消息...我第二次加载页面（不删除缓存），文本使用给定的字体显示！

为什么？！

这是用于加载字体的片段：

index.html：

<head>
    <meta charset='UTF-8' />
    <style>
        @font-face{
            font-family: "FFFForward";
            src: url("assets/fonts/fffforward.TTF");
        }
        * {padding: 0; margin: 0}
    </style>

app.js：

function DrawText(){
PointsTopText = new Text(
    "P1: " + PointsTop,
    {fontFamily: 'FFFForward, Arial', fontSize: 32, fill: 'white'}
);
PointsBotText = new Text(
    "Cpu: " + PointsBot,
    {fontFamily: 'FFFForward, Arial', fontSize: 32, fill: 'white'}
);
PointsTopText.position.set(0, Renderer.height / 2 - 32 * 2);
PointsBotText.position.set(0, Renderer.height / 2);
World.addChild(PointsTopText);
World.addChild(PointsBotText);
}

这是控制台的错误日志：

控制台：

downloadable font: bad search range (font-family: "FFFForward" style:normal weight:normal stretch:normal src index:0) source: [path]/assets/fonts/fffforward.TTF  PixiJs:6:14
downloadable font: bad range shift (font-family: "FFFForward" style:normal weight:normal stretch:normal src index:0) source: [path]/assets/fonts/fffforward.TTF  PixiJs:6:14
downloadable font: cmap: bad id_range_offset (font-family: "FFFForward" style:normal weight:normal stretch:normal src index:0) source: [path]/assets/fonts/fffforward.TTF  PixiJs:6:14
downloadable font: hdmx: the table should not be present when bit 2 and 4 of the head->flags are not set (font-family: "FFFForward" style:normal weight:normal stretch:normal src index:0) source: [path]/assets/fonts/fffforward.TTF  PixiJs:6:14
downloadable font: hdmx: Table discarded (font-family: "FFFForward" style:normal weight:normal stretch:normal src index:0) source: [path]/assets/fonts/fffforward.TTF  PixiJs:6:14

正如我所说，此消息仅是我第一次加载页面。第二次一切都很好。

我该怎么做才能防止这种情况？

为什么会发生这种情况？

这是什么意思？

使用webfontloader -https：//github.com/typekit/webfontloader-在之前同步加载字体您在Pixijs中进行任何绘图。这也适用于其他基于帆布的应用。

将以下内容放在html页面的＆lt; head>中：

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<script>
    WebFont.load({
        google: {
            families: ['Press Start 2P']
        },
        active:e=>{
            console.log("font loaded!");
            // now start setting up your PixiJS (or canvas) stuff!
        }
    });
</script>

尝试使用pixi.loader

const loader = new PIXI.loaders.Loader();
loader.add('fffforward', 'assets/fonts/fffforward.TTF');
loader.load((loader, resources) => {
    PointsTopText = new Text(
        "P1: " + PointsTop,
        {fontFamily: 'FFFForward', fontSize: 32, fill: 'white'}
    );
    World.addChild(PointsTopText);
});

相关内容

最新更新

热门标签：