【HarmonyOS NEXT】ArkTS是否支持iconfont图标

 

【关键字】

ArkTS / UI组件 / iconfont图标 / @ohos.font注册自定义字体 / registerFont

【问题描述】

咨询场景：目前有一套标准UI组件库，大部分图标是iconfont。

• 问题一：ArkTS是否支持iconfont？

• 问题二：若支持，registerFont注册自己的iconfont的ttf文件后，如何去使用icon图标？

【解决方案】

• 问题一：支持外部引入的方式，详细内容可参考如下文档中的registerFont方法。

  https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-font-0000001821000745#ZH-CN_TOPIC_0000001821000745__fontregisterfont

• 问题二、引入ttf文件后，需要有对应的Iconfont才能显示，请参考如下代码实现。

import font from '@ohos.font';

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

aboutToAppear() {

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

build() {
Row() {
Column() {
Text("\ue6fb")
.fontSize(50)
.fontWeight(FontWeight.Bold)
.fontFamily("iconfont")
Image("https://piccpndali.v.myalicdn.com/pic/cctv2_2.png")
.alt($r("app.media.startIcon"))
.width(300)
.height(300)
.onError(() => {
console.log("图片加载失败。。。")
})
}
.width('100%')
}
.height('100%')
}
}