1、打开官网:https://www.iconfont.cn/,把整理好的图标下载解压。
2、由于微信小程序不支持直接在wxss中引入.ttf/.woff/.woff2(在开发工具生效,手机不生效)。我们需要对下载的文件进一步处理。
- eot:IE系列专属字体方案,不推荐。
- svg:不是真的字体,存在很多兼容问题,已经被大部分浏览器抛弃,不推荐。
- ttf:兼容性好,但是字体文件较大 ,不推荐。
- woff:W3C标准,兼容性好,推荐。
- woff2:W3C标准,但是不兼容IE,推荐。
3、我们选择转换.woff2文件为base64,转换地址:File To Base64 Encoder | Convert any file | GiftOfSpeed
@font-face {
font-family: "iconfont"; /* Project id 4737589 */
src: url("data:font/truetype;charset=utf-8;base64,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")
format("woff2");
}
5、在app.less引入文件
6、成功展示