HarmonyOS 鸿蒙Next 全局支持iconfont字体图标

发布于 1周前 作者 yibo5220 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 全局支持iconfont字体图标 https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-font-V5#fontregisterfont

按文档只能在某个页面引入字体图标

在Ability入口引入无效

请问如何全局引入,毕竟每个页面都去写一个那个极大增加代码量


更多关于HarmonyOS 鸿蒙Next 全局支持iconfont字体图标的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

1、全局使用自定义字体,在EntryAbility.ets文件的onWindowStageCreate生命周期中,通过windowStage.loadContent回调注册

import font from '@ohos.font';
onWindowStageCreate(windowStage: window.WindowStage): void {
  windowStage.loadContent('pages/registerFont', (err, data) => {
    if (err.code) {
      return;
    }
    font.registerFont({
      familyName: 'iconfont',
      familySrc: $rawfile('AlimamaDaoLiTi.ttf')
    })
    font.registerFont({
      familyName: 'SF',
      familySrc: $rawfile('font/SF-Pro-Text-Italic.ttf')
    })
  });
}

2、registerFont.ets在页面中使用注册的字体familyName即可

@Entry
@Component
struct registerFont {
  @State message: string = 'test'
  build() {
    Column() {
      Text(this.message)
        .align(Alignment.Center)
        .fontSize(50)
        .fontFamily('iconfont')
      Text(this.message)
        .align(Alignment.Center)
        .fontSize(50)
        .fontFamily('SF')
    }.width('100%')
  }
}

更多关于HarmonyOS 鸿蒙Next 全局支持iconfont字体图标的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


HarmonyOS鸿蒙Next全局支持iconfont字体图标,这意味着开发者可以在应用中使用iconfont字体图标,而无需依赖图片资源。iconfont字体图标具有矢量特性,可以无损缩放,且文件体积较小,适合在多种设备上使用。鸿蒙Next通过系统级的支持,使得iconfont字体图标可以在应用的各个界面中统一使用,提升开发效率和用户体验。开发者可以通过鸿蒙提供的API,轻松地将iconfont字体图标集成到应用中,并实现动态调整图标大小、颜色等属性。

HarmonyOS Next 全面支持 iconfont 字体图标,开发者可通过 @ohos.font 模块加载自定义字体文件,并在布局文件中使用 Text 组件显示图标。具体步骤包括:将字体文件放入 resources/base/font 目录,在 config.json 中声明字体资源,然后在代码中通过 fontFamily 属性引用。这种方式简化了图标管理,提升了应用性能,同时支持矢量图标的缩放和颜色自定义,增强了 UI 设计的灵活性。

回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!