前端页面性能优化之tff字体包压缩
前端页面性能优化之tff字体包压缩
如果您觉得这篇文章有帮助的话!给个点赞和评论支持下吧,感谢~
作者:哇子
IT技术(摸鱼)交流QQ群:374984174
背景
在前端开发中,我们通常使用到需要的字体文件引入到项目中,像这样
1 | @font-face { |
但是有些时候字体包文件很大,导致页面在第一次进入时,字体刚开始还是默认字体,会等个2-3秒后,才会应用你想要的字体,页面看上去字体就像被闪了一下,体验非常不好,今天教大家如何压缩字体文件。
开始
1、font-spider
font-spider是一个中文字体压缩器,
原理:
1.爬行本地 html 文档,分析所有 css 语句
2.记录@font-face语句声明的字体,并且记录使用该字体的 css 选择器
3.通过 css 选择器的规则查找当前 html 文档的节点,记录节点上的文本
4.找到字体文件并删除没被使用的字符
5.编码成跨平台使用的字体格式
简而言之:就是爬出你项目中所使用的文字保留起来,删除没被使用到的文字,并重新打包一个tff文件。
2、新建文件夹
新建一个文件夹,cd到新建的文件夹,执行以下命令
1 | npm init -y |
1 | npm install font-spider -g |
然后建一个fonts文件夹用于存放字体文件,在写一个fonts.css
1 | @font-face { |
再写一个index.html,引入刚刚的fonts.css,并且在div中写入你想引入的全部字
注意 div中的内容就是我们要抽出为字体!!!
1 |
|
font-spider的原理是扫描你所用的全部字,然后从你的字体包中抽离出你想要的字,除去你没有用到的字,然后重新压缩成tff。所以这种方式的优点就是字体包变小了,但是只会抽离你上面代码用到的字,应用场景只能用于一些固定不变的静态页面,比如官网。
3、使用font-spider压缩字体
1 | font-spider ./index.html |
可以看到我们字体包从8M压缩到了58k
然后去找你的项目中的字体文件就变小了,可以复制到其他项目引用!!!
-
感谢你赐予我前进的力量
赞赏者名单
因为你们的支持让我意识到写文章的价值🙏
本文是原创文章,采用 CC BY-NC-ND 4.0 协议,完整转载请注明来自 哇子
评论