查看原文
其他

引入自定义字体包体积过大怎么办???

爱加班的小刘 爱加班的小刘 2023-09-12

由于公众号的规则调整,您可能无法在订阅号列表中,看到小刘的更新。建议您把 爱加班的小刘 设置为星标,这样更方便找到。路径是:进入公众号→右上角“...”→设为星★标

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

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

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

前言

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

  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次转换机会,如果超过了需要登录后才能转。



往期推荐

1. 全网最强的下载神器——IDM介绍

2. 最新开源的DragGAN来了,浏览器抢先体验

3. 阅读爱好者福音——两款无广告的小说阅读器

4. 找到了,最强到的GIF录制神器


您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存