我目前正在学习Pixijs。我经历了这个家伙的教程：github.com/kittykatattack/learningPixi不错的一个顺便说一句。
环境：Xampp，Firefox，Pixi Js，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页面的<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);
});