HarmonyOS iconfont使用demo

HarmonyOS
2024-12-24 18:00:05
636浏览
收藏 0
回答 1
回答 1
按赞同
/
按时间
Excelsior_abit

当前支持使用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%')
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
分享
微博
QQ
微信
回复
2024-12-24 19:47:49
相关问题
HarmonyOS 应用使用iconfont不显示
765浏览 • 1回复 待解决
HarmonyOS 关于Iconfont如何使用问题?
966浏览 • 1回复 待解决
如何支持iconfont.ttf的使用
3320浏览 • 1回复 待解决
HarmonyOS iconFont支持情况
721浏览 • 1回复 待解决
HarmonyOS 如何引入iconFont
553浏览 • 1回复 待解决
HarmonyOS 什么时候支持iconfont
1128浏览 • 1回复 待解决
IconFont图标展示方式
1171浏览 • 1回复 待解决
ArkUI 是否支持iconfont
1030浏览 • 0回复 待解决
HarmonyOS socketio使用demo
780浏览 • 1回复 待解决
requestPermissionsFromUser使用Demo
2180浏览 • 1回复 待解决
HarmonyOS 消息通知使用示例demo
1233浏览 • 1回复 待解决
是否支持iconfont?是否有样例代码?
1654浏览 • 1回复 待解决
HarmonyOS 粘贴板如何使用Demo
774浏览 • 1回复 待解决
HarmonyOS 申请使用webview场景的demo
1208浏览 • 1回复 待解决
使用Web组件下载能力Demo
1264浏览 • 1回复 待解决
HarmonyOS 密钥库RSA算法的使用demo
616浏览 • 1回复 待解决
HarmonyOS web-view的使用以及demo
889浏览 • 1回复 待解决
使用文档中demo,获取不到font信息
2234浏览 • 1回复 待解决
HarmonyOS 曲线demo
742浏览 • 1回复 待解决
使用华为账号DEMO需要应用上架么
1594浏览 • 1回复 待解决
HarmonyOS 商城demo
608浏览 • 1回复 待解决