HarmonyOS鸿蒙Next中自定义字体无法全局使用如何处理

【问题现象】

registerFont注册全局生效的自定义字体失败，只能注册页面级字体。

1. 预期效果

注册自定义字体后，在应用中能成功使用该字体。

2. 实际效果

注册自定义字体后，显示效果与默认字体相同。

问题代码如下：

• 注册字体

// 注册iconFont
font.registerFont({
  familyName: 'iconFont',
  // 自定义字体存储在rawfile的font文件夹下
  familySrc: $rawfile('font/STXINGKA.TTF')
})

• 使用字体

@Component
@Entry
struct Index {
  build() {
    Column() {
      // 使用自定义字体的文字
      Text("图标字体")
        .fontSize(30)
        .fontFamily("iconfont")
      // 使用默认字体的文字
      Text("图标字体")
        .fontSize(30)
    }.width('100%')
  }
}

【背景知识】

可参考官方文档[@ohos.font (注册自定义字体)](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-font-0000001821000745)。

【定位思路】

定位自定义字体无法使用的原因，需要从注册字体信息是否正确、使用时生命周期是否有效等方面来检查。常见的定位方式有如下两种：

1. 注册信息填写不正确

请根据接口文档font.registerFont进行检查。

2. 注册生命周期不正确

当自定义字体注册信息填写正确，但仍然无法使用时，是因为全局使用自定义字体，需在EntryAbility.ets文件的onWindowStageCreate生命周期中，通过windowStage.loadContent回调来注册。

详情参考windowStage.loadContent回调方法。

【解决方案】

根据定位思路可以做出如下操作：

1. 检查注册信息

首先请检查注册信息填写是否有误。

自定义字体被放在了rawfile的font文件夹下，注册路径正确无误，如下图所示：

2. 检查生命周期

根据定位思路，其次检查全局定义的字体生命周期是否正确。

代码示例如下：

// 在entryability.ets的onWindowStageCreate中，通过windowStage.loadContent回调注册自定义字体
onWindowStageCreate(windowStage: window.WindowStage): void {
    windowStage.loadContent('pages/Index', (err, data) => {
      windowStage.getMainWindow().then(res => {
        // 注册全局生效的自定义字体
        const uiCtc = res.getUIContext()
        uiCtc.getFont().registerFont({
              familyName: 'iconfont',
              // STXINGKA.TTF保存在rawfile目录下
              familySrc: $rawfile("font/STXINGKA.TTF")
        })
      })
      if (err.code) {
        hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
        return;
      }
      hilog.info(0x0000, 'testTag', 'Succeeded in loading the content. Data: %{public}s', JSON.stringify(data) ?? '');
   });
 }
// 在Index.ets中，通过Text组件使用注册后的字体
@Component
@Entry
struct Index {
  build() {
    Column() {
      // 使用自定义字体的文字
      Text("图标字体")
        .fontSize(30)
        .fontFamily("iconfont")
      Blank()
      // 使用默认字体的文字
      Text("图标字体")
        .fontSize(30)
    }.width('100%')
  }
}

处理效果：

如图所示，自定义字体已生效。

其他注意事项：

• 字体文件需要下载到本地使用，并且unicode编码要获取正确。
• 编译时需要在真机/模拟器上调试，预览器上不能正常展示。

【总结】

@ohos.font可以注册出页面级的字体，也可以注册出全局性的字体，全局字体需要通过windowStage.loadContent进行回调注册。