如何在Phaser 3中使用位图文本或文本使用外部字体？

Question

我在fonts /目录中有一种字体。如何将其加载到游戏中，然后在游戏中的文本对象上使用它？在Phaser 3中使用字体我找不到任何东西。

我尝试了

的多种方法和属性

https://labs.phaser.io/index.html?dir=&q=

https://photonstorm.github.io/phaser3-docs

移相器3的这两个链接，但无法设置垂直文字的宽度

我也尝试使用css应用字体，但对我也不起作用。

谢谢。

Answer 1

首先，以正常方式从CSS加载字体，如下所示（如果url是相对的，如下所示，则必须相对于css文件）：

@font-face {
    font-family: "Indie Flower";
    src: url(../fonts/IndieFlower.ttf) format("truetype");
}

然后以您的文本对象样式使用字体系列：

function create() {
    this.add.text(10, 10, 'My text', {
        fontFamily: 'Indie Flower',
        fontSize: '2.5em'
    });
}

请参见the Phaser.js docs，以查看所有可用的属性。

您可能会遇到字体加载问题：我的意思是字体可能不会在加载时显示，并且您可能必须等待加载然后更改文本才能显示字体；我不是专家，为此有许多不同的解决方案。就我而言，在测试答案时，我只是在html正文的开头添加了这一行，并解决了该问题：

<span style="font-family:'Indie Flower'"></span>