最近有个项目需求，需要改变小程序所有文字的字体。

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

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

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

1.本地加载。

将外部字体文件(类型为.ttf、.eot等)上传至https://transfonter.org/网站，转化为base64码的形式，然后将转化后的css文件中的64码粘贴至小程序的公共app.css样式文件中引用。

(这里注意：在网站中转换字体为64码的时候，勾选的后缀越多(如ttf、woff)，生成的64码大小越大，这里不知道勾选不一样会有什么区别，我想的应该是适用的环境不一样可能就会出现一些区别，有明白的老哥希望不吝赐教。我当时为了极致小，只勾选了woff，生成了1M的64码，安卓和苹果都暂时未出现显示问题。)

引入方式为：

@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

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

分包的基本要求是将小程序的大小限制从2M扩大到8M，小程序的结构从没有包，变成由一个主包和多个子包构成，子包可以有2个、3个、4个，很多个，只要总体大小不超过8M，并且每个子包大小不超过2M。

本地加载字体文件，将已经转化成64码的字体样式放入app.wxss里后(app.wxss属于主包内，详情参考上面分享的链接)，只要主包的大小不超过2M，就算成功了。