HarmonyOS 鸿蒙Next iconfont示例工程

HarmonyOS 鸿蒙Next iconfont示例工程

iconfont 在preview中正常，真机中无法正常加载，可能是什么原因

2 回复

iconfont使用需要拿到字体库对应的ttf文件。然后通过自定义字体 [@ohos](/user/ohos).font的接口去注册，在Text上使用对应的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组件加载字体图标，鸿蒙上\u标识unicode编码，如原图标在html上的编码为&#xe67e，在鸿蒙上的写法即为\ue67e
      Text("\ue67e")
        .fontSize(50)
        .fontFamily("iconfont")
    }
    .width('100%')
  }
  .height('100%')
}

更多关于HarmonyOS 鸿蒙Next iconfont示例工程的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


作为IT专家，对于HarmonyOS鸿蒙Next开发中的iconfont示例工程，以下是具体的实现步骤：

  1. 访问阿里巴巴图标库，选择所需的图标并加购至购物车，然后点击购物车将图标添加至项目。如果没有新建项目，则先新建项目再将图标加入。
  2. 下载项目得到的压缩包，解压后得到ttf文件和其他相关文件。在HarmonyOS项目的ets目录下新建fonts目录，将解压得到的所有文件复制到fonts目录中。
  3. 在需要使用图标的页面的生命周期函数中注册字体。例如，在aboutToAppear()函数中，使用font.registerFont()接口注册字体，familyName设置为自定义的字体名称，familySrc设置为ttf文件的路径。
  4. 在需要使用图标的地方，使用Text组件，字符串参数为’\u’加上图标的Unicode编码（可以在下载的压缩包中的html文件中找到）。同时，使用fontFamily()函数设置字体为刚才注册的自定义字体。
  5. 如果需要在全局范围内使用自定义字体，可以在EntryAbility.ets文件的onWindowStageCreate生命周期中注册字体。

示例代码如下：

@Entry @Component
struct UseIconFont {
    @State unicode: string = '\uXXXX'; // XXXX为图标的Unicode编码

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

    build() {
        Row() {
            Column() {
                Text(this.unicode).fontFamily('myIconFont').fontSize(50);
            }
        }
    }
}

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html。

回到顶部