Question

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

Answer 1

首先使用css加载字体（@fontface）：

<style media='screen' type='text/css'>
      @font-face {
        font-family: font1;
        src: url('media/yourfont.ttf');
        font-weight:400;
        font-weight:normal;
      }
</style>

然后使用div加载字体：

<div style="font-family:font1; position:absolute; left:-1000px; visibility:hidden;">.</div>

现在您可以将其添加到游戏中：

this.add.text(190, 136, 'text', {
    fontFamily: 'font1',
});

Answer 2

纯JS解决方案：

这是我做的一个小功能，只需要字体名称和网址：

function loadFont(name, url) {
    var newFont = new FontFace(name, `url(${url})`);
    newFont.load().then(function (loaded) {
        document.fonts.add(loaded);
    }).catch(function (error) {
        return error;
    });
}

并像这样使用它：

loadFont("mixolydian", "assets/fonts/mixolydian.ttf");

就是这样！现在，您可以在Phaser中使用自定义字体。您所要做的就是将fontFamily值更改为新的字体名称（即mixolydian）。

Answer 3

我建议使用FontFace，因为字体通常不会在正确的时间加载

kotlin中的示例代码

external class FontFace(family: String, src: String) {

    fun load(): Promise<FontFace>
}

fun main() {
    FontFace("myfont", "url(myfont.ttf)").load().then {
        document.asDynamic().fonts.add(it)
        // ... start game from here
    }
}

如何在Phaser 3中使用本地字体？

3 个答案:

纯JS解决方案：