在 ArkUI 中如何使用 iconfont

什么是 iconfont

IconFont，即图标字体，是一种特殊的字体类型，用于替代传统的图片图标。与图片图标不同，IconFont 是由矢量图形组成的字体文件，通常扩展名为 .ttf 或 .woff。这些图标可以像普通文本那样被嵌入到网页或应用程序中，并且可以通过代码来调整大小、颜色以及应用其他样式。

字体下载

1. 访问阿里巴巴图标库，注册账号并登录。
2. 选择自己所需要的图标（必须选择单色）添加到购物车，点击购物车后添加至项目。
3. 下载 ttf

字体引入

将下载的文件放到 rawfile 文件夹中

注册与使用

局部注册

在组件可见生命周期aboutToAppear注册 font.registerFont developer.huawei.com/consumer/cn…

import { font } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  aboutToAppear(): void {
    font.registerFont({
      familyName: 'iconfont',
      familySrc: $rawfile('iconfont.ttf')
    })
  }

  build() {
    Column() {
      Text('\ue6a1')
        .fontFamily('iconfont')
        .fontColor('#ff0000')
        .id('HelloWorld')
        .fontSize(50)

      Text('\ue6a1')
        .fontFamily('iconfont')
        .fontColor('#00ff00')
        .id('HelloWorld')
        .fontSize(50)
    }
    .height('100%')
    .width('100%')
  }
}

全局注册

核心代码：onWindowStageCreate中进行font.registerFont

注意注意！，全局注册的方式预览器无效！只有模拟器和真机有效，官方文档都没怎么写，坑

import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { font, window } from '@kit.ArkUI';
import { BusinessError } from '@kit.BasicServicesKit';

export default class EntryAbility extends UIAbility {
  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
  }

  onDestroy(): void {
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy');
  }

  onWindowStageCreate(windowStage: window.WindowStage): void {


    // Main window is created, set main page for this ability
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');

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


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

      font.registerFont({
        familyName: 'iconfont',
        familySrc: $rawfile('iconfont.ttf')
      })
      hilog.info(0x0000, 'testTag', 'Succeeded in loading the content.');
    });
  }

  onWindowStageDestroy(): void {
    // Main window is destroyed, release UI related resources
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageDestroy');
  }

  onForeground(): void {
    // Ability has brought to foreground
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onForeground');
  }

  onBackground(): void {
    // Ability has back to background
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onBackground');
  }
}