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

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

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

最后采用小程序分包的形式完美解决，因此作下总结，但愿帮助到有须要的人。web

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

1.本地加载。

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

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

引入方式为：app

@font-face {

font-family: 'FZBYS';

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

(font-family:'FZBYS’中的FZBYS为变量名，可自行设置。)

引用方式为：

(不须要在css文件顶部写@import ‘…/…/…’)xss

page{

font-family:'FZBYS';

}

优势：1.加载方式为本地加载，加载速度快。进入小程序页面(包括安卓)字体已经被新的字体替换，不会有转变过程。

缺点：1.大部分从网上直接下载下来的源文件都较大，3-8M左右，甚至10多M，被转化的64码代码大小和字体文件差很少，因此大部分状况引入64码后，小程序大小会超过2M，致使没法上传。ide

解决办法：只需将本身须要改变字体的文字内容从字体源文件中"脱离"出来，减少字体文件大小，由于字体源文件中大部分复杂字和符号咱们都用不到。具体方法为使用Node字体压缩插件font-spider，附上一篇font-spider使用的参考连接

https://www.jianshu.com/p/b5f9605951f5svg

2.动态加载

动态加载分为两种

1.css连接外部字体

在公共css样式文件中写入下面代码，而后在须要引用字体样式的css文件中使用。

引入方式为：字体

@font-face {

font-family:'FZBYS';

src:url('https://***.com/***/***/FZBYS.TTF') format('truetype');

}

引用方式为：网站

page{

font-family:'FZBYS';

}

2.js连接外部字体

引入方式为：url

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.建议使用本地加载。

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

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