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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接: https://blog.csdn.net/weixin_44510465/article/details/89383928

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

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

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

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,就算成功了。

猜你喜欢

转载自blog.csdn.net/weixin_44510465/article/details/89383928
今日推荐