iconfont字体图标使用方法
iconfont字体图标的使用
- 优势:可以任意缩放大小,不失真,可以修改颜色,只要是字体可以设置的属性,它同样都可以进行设置
iconfont字体图标使用步骤
-
iconfont官网选图标,将他们加入项目,点击下载,如下动图所示:(不过好像非常糊,但是可以看个大概)
-
下载之后是一个压缩包,将其解压后,在ets目录中重新建一个子目录fonts,之后将解压后的全部文件都复制到fonts中,如图:
-
注册成自定义字体:我们可以在入口组件中的aboutToAppear生命周期函数中对其进行注册,这样只要一加载Index入口页面,就会进行注册,如下图:
//一加载Index入口页面,就进行注册
aboutToAppear(): void {
//注册字体
font.registerFont({
familyName:'myfont',//这个名字可以随意取字符即可
familySrc:'/fonts/iconfont.ttf'//注意这里一定是后缀为ttf的文件
})
//this.handleSort(0)
}
- 最后就完成了所有的准备工作,万事俱备,只欠开用!如下测试:
Text('\ue616')//注意:\u后面的字符不同会导致字体图标的不同
.fontFamily('myfont')//必填,不然不会显示
.fontSize(26)
.fontColor(Color.Gray)
.margin(20)
\u后应该填什么
- 注意:\u后的字符为这个图标下面所对编码中’x’之后的编码,如这个加油卡要用的话格式如下:
Text('\ue63a')
.fontFamily('myfont')