我可以在 Phaser 3 中设置字体的字体宽度吗？答案

【问题标题】：Can I set the font width of a font in Phaser 3?我可以在 Phaser 3 中设置字体的字体宽度吗？
【发布时间】：2021-09-11 18:06:57
【问题描述】：

我正在使用 Phaser 3 在带有 WebGL 的画布中开发浏览器游戏。我从 自定义加载 字体设置了画布文本的宽度，但我无法设置它的样式（例如，斜体、半粗体）。

这是我用来创建文本的代码：

this.add.text(100, 600, 'Test Text', {
  font: '50px Poppins'
})
this.add.text(100, 600, 'Test Text', {
  font: '50px Poppins semibold'
})

这是输出：

第二张图片使用的是默认字体，而不是 Poppins。似乎只要我尝试设置斜体或任何其他样式，它就会回退到默认字体。

我也尝试使用属性设置它（不走运）。有没有人遇到过同样的问题（样式化自定义字体），以及如何正确加载样式化的自定义字体？

【问题讨论】：

标签： javascript canvas webgl phaser-framework

【解决方案1】：

问题：

semibold 不是有效的font-weight。所以它将被视为字体。

解决方案：

this.add.text(100, 600, 'Test Text', {
  font: '600 50px Poppins' // 600 equivalent to Semi Bold
})

https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight

【讨论】：

感谢您的想法。但是并没有改变任何东西：imgur.com/a/0BxSbRw Docs 还说没有设置 fontWeight 的属性：newdocs.phaser.io/docs/3.55.2/…
感谢您的更新。我发现了问题。它与画布无关。它与从谷歌异步加载字体有关。使用来自谷歌的 webfontloader，我可以等待活动事件，直到它们准备好。这解决了问题。
@LarsFlieger 请考虑发布您自己的答案并接受它，因为您似乎有两个不相关的问题需要解决。我不确定你为什么接受这个答案（它解决了你的一个问题吗？），但不幸的是你的解决方案被埋在了评论中。

【解决方案2】：

问题与从谷歌异步加载字体有关。使用来自谷歌的webfontloader，我可以等待活动事件，直到他们准备好。

import WebFont = require('webfontloader')

export class BootScene extends Phaser.Scene {
  private ready: boolean = false
  constructor() {
    super({
      key: 'BootScene'
    })
  }
  async preload(): Promise < any > {
    WebFont.load({
      google: {
        families: ['Poppins:600i,600,400', 'Inconsolata']
      },
      active: () => {
        // This is required for asnyc loading
        this.ready = true
      }
    })
  }
  // Launch game when all assets are loaded
  update(): void {
    if (this.load.isReady() && this.ready) {
      this.scene.start('MainMenuScene')
    }
  }
}

【讨论】：