自定义字体体积过大解决方案

前两天刚把网站字体改成了苹方,但是没有考虑到字体文件太大的问题,导致新版的博客加载速度贼慢。

而且移动端还会出现加载时间过程页面长时间处于空白状态,贼需要优化加载速度。

今天就来聊聊如何优化自定义字体包的体积。

前言

目前网上主流的字体包优化答题分为两个方面。

  1. 转换字体格式,例如从ttf—>woff2
  2. 使用工具从全部单词的字体文件中提取需要的字体,重新生成新的字体包。

格式转换

肯定会有人问,为什么要从ttf转换成woff2呢?有什么优势?

TTF全名TrueType Font,由美国苹果公司和微软公司共同开发,年限有点久了。而woff2相当于它的升级版吧,对比于ttf最大的优势就是利用了压缩来减少字体包的大小,对网络带宽需求更小且设备上解压速度也很理想。

格式转化后woff2格式大小最多能比ttf格式大小减少50%,压缩比还是非常可观的。

但是woff2的兼容性没有ttf好,主流的浏览器都支持,更久远的浏览器比如大名鼎鼎的IE就不支持了。

读者可以根据自身实际情况决定是否转换字体包格式。

字体提取

相较于格式转化,字体提取差不多能比没提取前减少90%,没错只有原来的十分之一的大小。

常用中文大概有3500字,字体提取的原理就是从完整的字体包中把这3500字提取出来单独生成一个新的字体文件,这样就能有效的减少整个包的大小。

目前主流的提取插件是font-spider,但是插件只能静态的提取出来网页上存在的中文,对于从服务器传过来的数据则抓取不到,能力有限。所以本文推荐一个使用python开发的工具——fontTools,操作简单只需要两个文件——字体包3500常用字即可。

操作步骤

上面已经介绍了两种方式,博主是两个同时使用了。

字体包大小从原本12.7M降到了现在的444K,效果杠杠滴!!!b( ̄▽ ̄)d

下面则是介绍具体的操作步骤。

前提条件:电脑上装有python环境,温馨提示最好装最新的,最次也要python3以上。

安装FontTools

pip install fontTools

开始取字体包子集

pyftsubset.exe PingFang\ SC.ttf --text-file=3500.txt

pyftsubset后面跟的第一个参数是字体包的路径,第二个–text-file则是预先准备好的3500个常用字符,执行完后会在当前目录下生成一个子集字体包。

下一步就是转换成woff2格式了,这里是用的一个在线网站进行转的。

网址:TTF to WOFF2 | CloudConvert

每天有10次转换机会,如果超过了需要登录后才能转。

原文链接:https://www.xiaoliu.life/p/20230704a

猜你喜欢

转载自blog.csdn.net/weixin_46630782/article/details/131540134