HarmonyOS Next开发中使用iconfont字体图标

在HarmonyOS开发中使用阿里巴巴图标库的字体图标，完成字体下载、注册和使用。

字体下载

1. 访问阿里巴巴图标库，注册账号并登录。
2. 选择自己所需要的图标（尽可能选择单色图标，多色图标可能有兼容性问题）添加到购物车，点击购物车后添加至项目。
   
3. 如果没有新建项目则点击新建项目图标，建好项目后将所选图标加入项目。
   
4. 选择Unicode标签，点击下载至本地得到一个压缩包。
   

字体引入

HarmonyOS项目的ets目录下新建fonts目录，将下载的压缩包内的所有文件解压到fonts目录中。

注册和使用

局部注册

1. 在需要用到的页面引入官方库用于注册。

import font from '@ohos.font';

2. 生命周期函数中注册图标。

aboutToAppear(): void {
    font.registerFont({
      familyName:'myIconFont',
      familySrc:'/fonts/iconfont.ttf'
    })
  }

3. 使用图标（Text组件字符串参数由\u+Unicode代码组成，在解压文件中有一个html文件，将该文件在浏览器中打开即可找到图标的Unicode代码）。

Text('\ue8ab')
  .fontFamily('myIconFont')
  .fontColor(Color.Orange)
  .fontSize(36)

全局注册

参考官方文档@ohos.font (注册自定义字体)，中有这样一段说明：

说明
应用若需全局使用自定义字体，请在EntryAbility.ets文件的onWindowStageCreate生命周期中，通过windowStage.loadContent回调注册。在HSP工程中，不推荐采用相对路径的方式注册自定义字体，详见HSP资源引用。

1. 在生命周期中全局注册字体图标

onWindowStageCreate(windowStage: window.WindowStage): void {
    // Main window is created, set main page for this ability
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');

    windowStage.loadContent('pages/Index', (err) => {
      if (err.code) {
        hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
        return;
      }
	// 注册字体图标
      hilog.info(0x0000, 'registerFont', '注册字体成功');
      font.registerFont({
      	// 个人更推荐以下路径引入的方式，简洁明了，依照自己喜好自行选择
        familyName: $r('app.string.icon_font_name'),
        familySrc: $r('app.string.icon_font_src')
      })
      hilog.info(0x0000, 'testTag', 'Succeeded in loading the content.');
    });
  }

2. 回到预览器previewer查看效果。

理想很丰满，现实很骨感，预览器竟然空空如也…
别气馁，保持冷静
此时你会发现
预览器并不会执行ability生命周期函数
因此必须去模拟器真机中进行调试
这样就有效果啦！

Text('\ue8ab').fontFamily('myIconFont').fontSize(24).fontColor(Color.Black)