HarmonyOS 鸿蒙Next中ArkUI是否支持iconfont

HarmonyOS 鸿蒙Next中ArkUI是否支持iconfont ArkUI 是否支持iconfont

3 回复

当前支持使用iconfont，使用方式是通过Text组件来承载，需要将iconfont.ttf文件下载到本地使用，同时注意unicode编码要获取正确
官网文档即：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-font-0000001821000745

使用参考如下：

// 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组件加载字体图标，鸿蒙上\u标识unicode编码，如原图标在html上的编码为&#xe67e，在鸿蒙上的写法即为\ue67e
      Text("\ue67e")
        .fontSize(50)
        .fontFamily("iconfont")
    }
    .width('100%')
  }
  .height('100%')
}

更多关于HarmonyOS 鸿蒙Next中ArkUI是否支持iconfont的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，ArkUI支持使用iconfont。通过引入字体文件，开发者可以在ArkUI组件中使用自定义图标字体。具体步骤包括：将iconfont字体文件（如.ttf或.otf格式）放入项目的资源目录，然后在代码中通过fontFamily属性指定该字体文件，并使用Unicode字符来显示图标。例如，可以在<Text>或<Button>组件中设置fontFamily和text属性来展示iconfont图标。ArkUI的这一特性为开发者提供了更多样化的图标选择和更灵活的UI设计能力。

在HarmonyOS的ArkUI框架中，目前官方并未直接提供对iconfont的支持。不过，开发者可以通过自定义组件或使用第三方库来间接实现iconfont的集成。具体来说，可以将iconfont文件转换为SVG格式，然后在ArkUI中通过Image或Svg组件进行展示。此外，也可以通过编写自定义组件来加载和渲染iconfont，但需要处理字体文件的加载和渲染逻辑。

回到顶部