前言
网上关于字体图标使用方式的介绍文章很多,本篇文章主要是我在日常的微信小程序项目中对阿里字体图标库 iconfont
使用上的一些介绍与总结,如您已了解过其在 web 中的使用,可跳至第三节开始阅读。
一、字体图标介绍
脱胎于 web 的微信小程序从诞生起就支持 iconfont
字体图标,毕竟字体图标也是一种字体,只是设计成了图标的形式,与常用的宋体、微软雅黑等字体别无二致。
与传统图片形式的图标相比,其优势很多:
- 可以通过
css
样式给其设置大小、颜色等,只要font
支持的属性,它都支持,特别是hover
效果无需两张图片,只需改变其颜色就可达到; - 作为矢量图,无论怎么改变大小,都不会失真;
- 可以通过样式变量设置其颜色,做到全局统一,方便变换主题风格;
- 图标海量,在无 UI 介入的情况下,也可便捷的找到想要的图标;
- 可以减少网络请求。
二、阿里字体图标
1. 图标介绍
早前,我因为 Bootstrap
框架的集成而使用过 Font Awesome
字体图标库,后来遇到了iconfont-阿里巴巴矢量图标库,正如其宣传的那样——海量!
2. 官方教程
作为前端,在没有 UI 配合的情况下,iconfont
提供的海量图标让我很容易找到想要的图标,其使用上也很便捷,关于阿里图标的使用介绍,请查看官方提供的帮助中心,在此不做过多赘述。
3. 图标编辑
由于大多图标上传者并非一人,其质量层次不齐,无法像 Font Awesome
那样做到风格一致,此时需要点开图标的编辑功能,对图标的大小与位置做一些统一的调整,以使选择的图标能在样式上保持一致。
三、在小程序中使用
1. 载入方式
我在 vue
项目中使用方式是直接将字体图标文件下载后放入到 static/iconfont
文件夹下,在 main.js
中引入即可;但同样的方式在小程序中是不可行的,问题如下:
首先将 iconfont.css
后缀名改为 .wxss
,我一般会在项目根目录新建一个 static/iconfont
文件夹来存放字体文件,该文件的 iconfont.wxss
内容如下所示:
接下来在 app.wxss
文件中引入样式文件
@import "./static/iconfont/iconfont.wxss";
但此时,微信开发者工具会报 do-not-use-local-path
错误,原因是微信小程序的样式文件不支持引入本地文件(无论是字体还是图片等资源, .wxml
文件支持本地图片),只支持外链或者 base64
方式引入,所以解决方案如下:
1) 外链方式引入
在 iconfont
项目页面,选择 Unicode
方式,生成在线代码,如下图所示:
接下来我们将 iconfont.wxss
中字体的本地路径改为网络路径,虽然首次加载(开发者工具清空全部缓存)时开发者工具会报加载异常,但字体图标文件实际已加载完成,图标能成功显示出来。
此时本地的字体文件已经无用了,我们可以将文件删除。这种方式可以减少文件的体积。当然如同下载时页面的提示一样,使用三方 CDN 是有一些风险的,前不久阿里字体就出现过无法访问的问题,稳妥点的方式是将字体文件上传到自己的服务器或者 cdn
中作为外链使用。
缺点:
- 每次增加图标时需要替换对应的服务器上的文件,使用起来较为繁琐;
- 链接必须是
https
,可能存在跨域问题。
2) base64
形式引入
该方式是我目前使用的方式,我也推荐使用该方式。
首先我们点击 iconfont
项目中的 项目设置
按钮,位置如下图所示:
我们勾选图中所示三种字体格式,选择 base64
是为了将另外两种字体转为 base64
形式,而选择 woff
与 ttf
字体原因如下:
- TTF 兼容性更好,缺点是字体文件体积大;
- WOFF 与 TTF 字体相比体积小且表现性好;
- WOFF2 字体是对 WOFF 字体的升级,但兼容性欠佳。
微信的官方文档中也建议选择以上两种字体:
建议格式为 TTF 和 WOFF,WOFF2 在低版本的 iOS 上会不兼容。
我们再次下载设置后的字体图标文件,并将 iconfont.css
重命名为 iconfont.wxss
,因为下载的文件已将字体转为 base64
格式放入到 iconfont.wxss
中,所以我们只需要将 iconfont.wxss
文件复制到项目中即可,如下图所示:
虽然 base64
形式会增加约 1/3 的体积,但在少量图标的情况下,我更推荐这种方式引入,增加新图标时也只需要替换该文件即可,且由于会编译到小程序包文件中,不会出现外链形式在弱网或加载失败时图标显示为方框(所有字体找不到对应字符编码文件时都会显示成这样)的问题。
2. 代码示例
字体图标使用很简单,代码如下:
<text class="iconfont icon-xxx" />
3. 组件封装
每次写重复的标签与类名,不如将其封装为图标组件,只需要传入字体名称等属性,在使用上会方便很多。
icon
组件的封装代码如下,name
即为字体图标的名称:
<!-- components/icon/index.wxml 文件 -->
<text class="iconfont icon-{{ name }}" />
// components/icon/index.js 文件
Component({
// 此设置使外部样式可以影响组件样式
options: {
addGlobalClass: true,
},
properties: {
// 字体图标名称
name: {
type: String
}
}
}
图标组件在使用时,为方便起见,我会将图标组件设置为全局组件,使其在任意页面或组件中可直接使用。
// app.json 文件
// 由于小程序内置 icon 标签,我一般会将全局组件设置个前缀名称,即命名空间
"usingComponents": {
"m-icon": "/components/icon"
},
页面中使用
<m-icon name="play" />
4. 样式调整
iconfont.wxss
的默认样式如下图所示:
字体图标是使用 css
伪元素的方式实现,由于字体图标质量层次不齐,我在日常使用中一般会对其做一些调整,如设置默认水平垂直居中、默认字体大小改为 rpx
单位,以适应微信小程序,代码如下:
.iconfont
font-family: "iconfont" !important;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 32rpx;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
5. 命名调整
字体图标名称的前缀与 font family
是可以调整的,可以在 iconfont
项目设置 中更改字体名称与前缀(推荐此方式),也可以更改下载后的 .css
文件,以避免在多人协作项目中与他人的命名产生冲突;
特别是在制作组件库时,需要修改名称与自己组件库的命名空间保持一致。
变更方法如下,打开 项目设置:
保存后再次下载的图标文件中对应的 iconfont.wxss
文件内容如下:
@font-face {
font-family: "m-font"; // 变更后的字体名称
}
.m-font {
font-family: "m-font" !important;
}
.m-icon-xxx:before {
content: "\e653";
}
使用示例:
<text class="m-font m-icon-xxx" />
结束语
如您阅读过程中遇到任何问题,请留言。