PixiJS:加载自定义字体

时间:2017-09-14 11:57:26

标签: javascript css fonts pixi.js

我正在学习Pixijs。 我浏览了这个人的教程:github.com/kittykatattack/learningPixi 不错的顺便说一句。

Environement: 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

正如我所说,此消息仅在我第一次加载页面时出现。 第二次一切都很好。

我该怎么做才能防止这种情况发生?

为什么会这样?

这是什么意思?

2 个答案:

答案 0 :(得分:0)

使用webfontloader - https://github.com/typekit/webfontloader - 在中进行PixiJS中的任何绘图之前,同步加载字体。这也适用于其他基于画布的应用程序。

将以下内容放在&lt; head&gt;中HTML网页的一部分:

<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>

答案 1 :(得分:0)

尝试使用PIXI.loader

FOR %%i IN (C:\path\TEST_BAT\*) DO (SET current_path=%%~ni
SET C|findstr /r "ind.{1}" %current_path%
ECHO %C%)