解决小程序无法使用本地字体图标资源的问题_微信小程序怎么不能加载本地字体文件

问题描述：

        我们使用uni-app开发小程序的时候，或者直接使用原生代码开发小程序的时候，因为考虑到文件包的大小，一般会使用到字体图标，简洁好用体积小

        如果是在网页端，不管PC或者H5端，都可以直接使用本地下载好的字体文件，或者网络的字体文件

在 main.js 中引入

@import "./static/iconfont/iconfont.css";

也可以在public/index.html中引入线上图标

<script src="https://at.alicdn.com/t/xxx.css"></script>

但是在小程序中就会失效，控制台报错

问题处理：

如果希望能同时在网页端和小程序或者APP都能正常使用的话，有以下几个方案

1：不用图标改用图片，但失去了矢量和方便高亮变色的好处
2：字体文件放到服务器，从网络地址引用
3：将字体图标转换为base64格式字符串直接放到css里

综合考虑下来，我觉得第3点是比较合适的，下面就介绍一下如何将字体文件转换为base64格式。

1、使用在线转换工具 Transfonter，按照下图的顺序就可以得到转换后的base64格式

ps：第一步上传文件的时候可以自由选择字体文件的格式，但是考虑到大小的问题，推荐使用woff2格式，这个格式的字体文件体积最小

2、将下载的压缩包解压，打开css文件，将css代码复制并替换本地iconfont.css的@font-face部分即可

3、重启项目即大功告成