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

【问题标题】：How to use a external font using bitmaptext or text in Phaser 3?如何在 Phaser 3 中使用位图文本或文本使用外部字体？
【发布时间】：2018-08-25 18:58:56
【问题描述】：

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

我尝试了多种方法和属性

这两个链接用于phaser3，但无法设置特定文本的宽度

我也尝试使用 css 应用字体，但它也不适合我。

提前致谢。

【问题讨论】：

刚回答完你的问题后，我注意到另一个用户的very similar question with similar text；给定的答案是可以的。发生了什么？如果给定的答案不适合您，请在您的问题中更加准确，以便人们可以帮助您
How to use a local font in Phaser 3?的可能重复

【解决方案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>

【讨论】：