【鸿蒙 DEV EVO Stdio 5.0版本 图片不失真】HarmonyOS 关于iconfont字体图标的使用步骤以及它的优点

iconfont字体图标的使用

• 优势：可以任意缩放大小，不失真，可以修改颜色，只要是字体可以设置的属性，它同样都可以进行设置

iconfont字体图标使用步骤

1. iconfont官网选图标，将他们加入项目，点击下载，如下动图所示：(不过好像非常糊，但是可以看个大概)

2. 下载之后是一个压缩包，将其解压后，在ets目录中重新建一个子目录fonts，之后将解压后的全部文件都复制到fonts中，如图：
   

3. 注册成自定义字体：我们可以在入口组件中的aboutToAppear生命周期函数中对其进行注册，这样只要一加载Index入口页面，就会进行注册，如下图：

 //一加载Index入口页面，就进行注册
  aboutToAppear(): void {
    //注册字体
    font.registerFont({
      familyName:'myfont',//这个名字可以随意取字符即可
      familySrc:'/fonts/iconfont.ttf'//注意这里一定是后缀为ttf的文件
    })
    //this.handleSort(0)
  }

4. 最后就完成了所有的准备工作，万事俱备，只欠开用！如下测试：

  Text('\ue616')//注意：\u后面的字符不同会导致字体图标的不同
        .fontFamily('myfont')//必填，不然不会显示
        .fontSize(26)
        .fontColor(Color.Gray)
        .margin(20)

\u后应该填什么

- 注意：\u后的字符为这个图标下面所对编码中’x’之后的编码，如这个加油卡要用的话格式如下：

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