微信小程序引入外部字体总结（针对安卓加载缓慢问题）

╰半夏微凉° 2022-02-17 02:45 2440阅读 2赞

最近有个项目需求，需要改变小程序所有文字的字体。  
查了资料后发现，本地加载字体文件导致小程序太大。动态加载文件，苹果真机完美，但是在安卓的真机上引入的外部字体加载会很慢，会有很明显的默认字体切换到外部字体的过程，体验极差。

最后采用**小程序分包**的形式完美解决，所以做下总结，希望帮助到有需要的人。

引入外部字体，已知的有两种方式。

## 1.本地加载。 ##

将外部字体文件（类型为.ttf、.eot等）上传至https://transfonter.org/网站，转化为base64码的形式，然后将转化后的css文件中的64码粘贴至小程序的公共app.css样式文件中引用。  
（这里注意：在网站中转换字体为64码的时候，勾选的后缀越多（如ttf、woff），生成的64码大小越大，这里不知道勾选不一样会有什么区别，我想的应该是适用的环境不一样可能就会出现一些区别，有明白的老哥希望不吝赐教。我当时为了极致小，只勾选了woff，生成了1M的64码，安卓和苹果都暂时未出现显示问题。）  
![在这里插入图片描述][20190418135506813.png]  
**引入方式**为：

@font-face { 
        font-family: 'FZBYS';
        src: url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAADTxgABAAAAAW4twAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNA后面一长串省略。。。

(font-family:'FZBYS’中的FZBYS为变量名，可自行设置。)  
**引用方式**为：  
（不需要在css文件顶部写@import ‘…/…/…’）

page{ 
    	font-family:'FZBYS';
    }

**优点**：1.加载方式为本地加载，加载速度快。进入小程序页面（包括安卓）字体已经被新的字体替换，不会有转变过程。  
**缺点**：1.大部分从网上直接下载下来的源文件都较大，3-8M左右，甚至10多M，被转化的64码代码大小和字体文件差不多，所以大部分情况引入64码后，小程序大小会超过2M，导致无法上传。

**解决办法**：只需将自己需要改变字体的文字内容从字体源文件中"脱离"出来，减小字体文件大小，因为字体源文件中大部分复杂字和符号我们都用不到。具体方法为使用Node字体压缩插件font-spider，附上一篇font-spider使用的参考链接  
[https://www.jianshu.com/p/b5f9605951f5][https_www.jianshu.com_p_b5f9605951f5]

## 2.动态加载 ##

动态加载分为两种  
1.css链接外部字体  
在公共css样式文件中写入下面代码，然后在需要引用字体样式的css文件中使用。  
**引入方式**为：

@font-face { 
        font-family:'FZBYS';
        src:url('https://***.com/***/***/FZBYS.TTF') format('truetype');
    }

**引用方式**为：

page{ 
    	font-family:'FZBYS';
    }

2.js链接外部字体  
**引入方式**为：

wx.loadFontFace({ 
    
          family: 'FZBYS',
    
          source: 'url("https://***.****.com/font/FZBYS.TTF")', success: function (e) { 
               console.log(e, '动态加载字体成功')
          }, fail: function (e) { 
               console.log(e, '动态加载字体失败')
          },
    
        })

**引用方式**为：

page{ 
    	font-family:'FZBYS';
    }

**优点**：1.不需要将字体文件转化为64码，比较方便。  
**缺点**：1.动态加载字体文件，苹果真机上完美，但是在安卓的真机上引入的外部字体加载会很慢，会有明显的默认字体切换到外部字体的过程，体验教差，特别是字体文件越大，加载的速度越慢，有些小程序页面甚至无法加载成功。  
**解决办法**：1.将字体文件压缩小一点 2.若不在乎体验，那这个字体切换的过程也就不用在意 3.建议使用本地加载。

最后我的情况的解决办法是将小程序进行分包，如何分包可参考下面这条链接[https://blog.csdn.net/weixin\_44510465/article/details/89208139][https_blog.csdn.net_weixin_44510465_article_details_89208139]

分包的基本要求是将小程序的大小限制从2M扩大到8M，小程序的结构从没有包，变成由一个主包和多个子包构成，子包可以有2个、3个、4个，很多个，只要总体大小不超过8M，并且每个子包大小不超过2M。  
本地加载字体文件，将已经转化成64码的字体样式放入app.wxss里后（app.wxss属于主包内，详情参考上面分享的链接），只要主包的大小不超过2M，就算成功了。

[20190418135506813.png]: /images/20220217/0459ea9a068b4485a1277075dce8b0a0.png
[https_www.jianshu.com_p_b5f9605951f5]: https://www.jianshu.com/p/b5f9605951f5
[https_blog.csdn.net_weixin_44510465_article_details_89208139]: https://blog.csdn.net/weixin_44510465/article/details/89208139