前言
最近在优化项目性能,由于要想完美的贴合设计稿,所以使用了font-face加载字体,然而
这么恐怖的吗,加载字体就耗了20多M。所以这很有必要优化一下。
解决方案的寻找
font-display
https://css-tricks.com/font-display-masses/
这篇文章很好的介绍了font-display这个属性
简单来说就是可以设置网站在字体加载前使用系统字体,当字体下载完之后切换成自定义字体。然鹅。
好吧,这个解决方案只能pass了。
字蛛
font-spider,也就是字蛛,原理简单来说就是,由于和英文或其他一些语言不同,中文的字多达几千上万个,而像英文只有26个字母,所以中文字体会非常大,那么如果获取 WebFont 中没有使用的字符,并将这些字符数据从字体中删除以实现压缩,同时生成跨浏览器使用的格式的话是不是字体文件就变得很小了呢。
我跟着官网上的教程安装了font-spider然后。。我之前说过我项目是Vue吧。结果SPA完全无法被解析。。。。。至此我只能先放置一下。
后记
我最后改回了系统字体,不玩自定义字体了。。