小程序里自定义字体实话实说是一件很痛苦的事情。如果为了好看,只弄英文字体硬实还没那么让人纠结,但事实上中文才是让人最头疼的。一个正常的中文字体少说8M左右,如何字库全一点的。20多M也不是不可能。放进APP可能还能接受,但放到小程序,好吧,直接放不下。
所以网上就有各种不同的工具,而且小程序也支持引入全部字体,常见的方法就是那么几种
1、非中文字体,比如图标,直接用iconfont,因为他支持网络字体和本地字体两种,如果不大就本地字体吧
2、英文,转成woff后,估计也没多少了,毕竟正常使用也就26个英文字母+10个数字,再不济加上一些标点符号。ASCII的可见字符基本上就可以在正常的页面里全部使用到了
3、中文,这才是大头,之前写过一篇:字体转换相关 ,但其实现在想想,这个有点偏手动了。
所以针对3,我们需要重新整理一下,原贴里的sfntool仍然需要,但这个工具有个小缺点,即不支持woff2,但也有个优点,即eot可以压缩,这样的话,处理英文字体就可以更小了。
处理中文分这么几步
1、获取项目中所有出现的中文,比如src目录下,针对vue/js/ts/jsx/tsx等文件,忽略css文件和图标等,将中文取出来去个重(不去也影响不大)。这个脚本可以自己写也可以用网上的一些开源库,象字蛛之类的。如果懒得找,问一下狗屁通,估计就能直接写了
2、传入sfntool中,生成相应的字体,目前看来,如果不压缩,woff会是比较小一点的
3、最重要的就是这一步,有多种处理:a.如果字体不大,就直接扔static里,建一个font.scss就行;b.如果字体不是太大,比如只有7、80K,可以考虑base64一下在font-family的url里,直接用base64;c.如果超过80K以上,建议直接上传到CDN去,毕竟这玩意其实还没有小程序的素材大,现在哪个图片不是要上百K的?
在这样的基础下,再利用package.json创建一个命令,就可以一键生成了,比如我现在就是这样,类似:java -jar sfntool.jar -s "$(node chinese.ts)" infile outfile && node base64.ts && node font-upload.ts
只是一个简单的描述处理方式 ,其实都可以在base64.ts里进行判断和处理,但基于一事一做的原则还是多拆开了。
字体处理就是这样,说方便也方便说复杂也复杂。