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

【问题标题】：How to use a local font in Phaser 3?如何在 Phaser 3 中使用本地字体？
【发布时间】：2018-12-15 11:04:18
【问题描述】：

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

【问题讨论】：

它有点隐藏，但移相器文档中有一个字体示例文件夹：labs.phaser.io/index.html?dir=game%20objects/text/static

【解决方案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',
});

【讨论】：

有效！一开始我没有把点放在div的中间，也没用。
如果您使用 Parcel 或 Webpack 捆绑您的资产，这将不起作用。在这种情况下，您必须使用上述 JS 导入来获取正确的文件名。

【解决方案2】：

纯JS解决方案：

这是我做的一个小函数，只需要字体名和url：

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）。

【讨论】：

当使用 TypeScript 时，它不会编译 - 它既不能识别 FontFace 也不能识别 documents.fonts

【解决方案3】：

打字稿中有以下解决方案：

function loadFont(name, url) {<br>
    &emsp;var newFont = new FontFace(name, `url(${url})`);<br>
    &emsp;newFont.load().then(function (loaded) {<br>
   &emsp;  &emsp;   (document as any).fonts.add(loaded);<br>
   &emsp; }).catch(function (error) {<br>
 &emsp; &emsp;      return error;<br>
  &emsp;  });<br>
}

【讨论】：