Kaboom加载woff/ttf非PNG字体报Font not found: undefined如何解决

loadFont API 用法混淆。Kaboom 中该接口对应两套完全独立的加载逻辑：

• 传3个及以上参数时，默认走 PNG位图字体 加载流程，会把传入的路径当精灵图解析，专门用来加载那种把所有字符拼在一张PNG图里的像素字体
• 仅传2个参数（自定义字体名、字体文件路径）时，才会走标准矢量字体加载流程，支持 woff、ttf、otf 等常规字体格式

你给 woff/ttf 格式的矢量字体也传了后面的字符宽、字符高参数，接口直接按位图字体逻辑去解析二进制字体文件，自然读不到有效字体数据，触发Font not found: undefined报错。

参考下面的代码调整即可，woff和ttf格式的加载逻辑完全一致，只需要替换对应文件路径：

kaboom({
  width: 900,
  height: 500,
  // 初始化阶段不要直接引用还没加载的自定义字体，先用默认内置字体即可
  background: [117, 193, 255]
})

// 加载资源
loadSprite("frog", "sprites/froggy.png");
loadSprite("arrow", "sprites/arrow.png");
loadSprite("waterlily", "sprites/waterlily.png")
// 加载矢量字体只传2个参数，不要追加后面的尺寸参数
loadFont("kenney-blocks", "fonts/Kenney-Blocks.woff")
// 加载ttf格式就替换成对应路径
// loadFont("kenney-blocks", "fonts/Kenney-Blocks.ttf")

// 等所有资源加载完成后再操作
onLoad(() => {
  // 资源加载完再切换默认字体
  setFont("kenney-blocks")
  // 后续添加文本、进游戏逻辑就可以正常用自定义字体了
  add([
    text("测试文本内容"),
    pos(100, 100)
  ])
})

• 不要在kaboom()初始化配置里直接声明还没加载完成的自定义字体，这个阶段字体还没完成拉取和解析，直接引用必然找不到，等onLoad触发后再用setFont()切换即可
• 只要是 woff、ttf、otf 这类矢量字体，调用loadFont时不要追加后面的字符宽、字符高参数，传了就会强制触发位图字体加载逻辑，必然加载失败
• 如果改完参数还是报错，打开浏览器开发者工具的「网络」面板，查看对应字体文件的请求状态，如果返回404就修正文件路径，确保静态资源服务能正常访问到目标字体文件

内容的提问来源于stack exchange，提问作者Hramzhuk