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

Question

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

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

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

这是输出：

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

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

Answer 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

Answer 2

问题与从 google 异步加载字体有关。使用 google 中的 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')
    }
  }
}

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

Can I set the font width of a font in Phaser 3?

javascript

canvas

webgl

phaser-framework