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

Question

我在 fonts/目录中有一个字体。如何将其加载到游戏中，然后在游戏中的文本对象上使用它？我还没有找到任何有关在 Phaser 3 中使用字体的信息。

我尝试了多种方法和属性

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

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

这两个链接都指向phaser3，但无法设置特定文本的宽度

我也尝试使用 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>