还会开发鸿蒙？阿里巴巴iconfont在HarmonyOS中如何使用

前言

iconfont拥有拥有庞大的图标库，涵盖了各种主题和风格的图标，以下我将介绍如何在鸿蒙系统中使用iconfont图标库

- 1.在iconfont中添加项目后下载并解压文件后，需将文件夹导入到系统目录当中

！important

该文件夹必须放在与pages同级目录之下

- 2.导包

import font from '@ohos.font'

在代码最上层输入以上代码段

- 3.注册字体

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

请写在Index之下，使得页面开始加载时，就能够对字体进行注册。

familyName可随意命名，familySrc请进入以ttf结尾的文件(./ ../会使得代码失效请勿使用)

- 4.Text引用定义字体

Text('\uxxxx')
  .fontFamily('myfont')

注意：是反斜杠！\u是前缀的固定格式后四位通过iconfont提供的Unicode书写

例子如下：

import font from '@ohos.font'
@Entry
@Component
struct Index {
  aboutToAppear(): void {
    font.registerFont({
      familyName:'myfont',
      familySrc:'/fonts/iconfont.ttf'
    })
  }
  build() {
    Column(){
      Text('\uec7f')
        .fontFamily('myfont')
        .fontSize(50)
        .fontColor(Color.Red
        )
    }
  }
}

总结

通过这种方式进入图标，相当于将图片看做是字体，能够使用字体上能修改的样式对图标进行编辑，并且不会丢失图标的像素