相同名字的不同字体的显示问题

  • Creator 版本:3.5.2和3.8.8

  • 编辑器操作系统: Mac OS

  • 重现概率:百分百复现

  • 浏览器: 谷歌浏览器

在不同文件夹里的相同名字的字体 显示的时候会随机被覆盖掉显示成同一个字体
这是不同名字的时候的显示效果


然后改一下名字就变成这样里

问题可能的原因原因
两个 Label 使用了两个不同的 TTF 资源文件(不同 uuid、不同路径),但 Cocos 引擎给它们分配了相同的 CSS font-family 名称 fzy4jw_LABEL

问题机制:

  1. Cocos 加载 TTF 时,在 font-loader.ts 中创建 FontFace
    const fontFace = new FontFace('fzy4jw_LABEL', `url('path/to/fzy4jw.ttf')`);
    document.fonts.add(fontFace);
    
  2. 两个不同的 TTF 文件被注册了相同的 family name
  3. 浏览器中后加载的 @font-face 会覆盖先加载的同名规则
  4. Canvas 绘制时 ctx.font = '20px fzy4jw_LABEL' 实际使用的是最后被覆盖的字体
  5. 由于加载顺序不确定 → "随机"显示第一个或第二个的字体