HarmonyOS iconfont使用demo?

如题:HarmonyOS iconfont使用demo?

阅读 680
1 个回答

当前支持使用iconfont,使用方式是通过Text组件来承载,需要将iconfont.ttf文件下载到本地使用,同时注意unicode编码要获取正确

官网文档即:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-font-V5

使用参考如下:

// entryability.ets
windowStage.loadContent('pages/Index', (err, data) => {

  if (err.code) {
    hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
    return;
  }

  let windowClass: window.Window;
  windowStage.getMainWindow((err, data) => {
    windowClass = data;
    // 全局注册字体文件,iconfont.ttf保存在rawfile目录下
    windowClass.getUIContext().getFont().registerFont({
      familyName: 'iconfont',
      familySrc: $rawfile('iconfont.ttf')
    })
  })

});
// page.ets
build() {
  Row() {
    Column() {
      // 使用Text组件加载字体图标,HarmonyOS上\u标识unicode编码,如原图标在html上的编码为&#xe67e,在HarmonyOS上的写法即为\ue67e
      Text("\ue67e")
        .fontSize(50)
        .fontFamily("iconfont")
    }
    .width('100%')
  }
  .height('100%')
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进