前言

最近在优化项目性能，由于要想完美的贴合设计稿，所以使用了font-face加载字体，然而

分析.png

这么恐怖的吗，加载字体就耗了20多M。所以这很有必要优化一下。

解决方案的寻找

font-display

https://css-tricks.com/font-display-masses/
这篇文章很好的介绍了font-display这个属性
简单来说就是可以设置网站在字体加载前使用系统字体，当字体下载完之后切换成自定义字体。然鹅。

caniuse

好吧，这个解决方案只能pass了。

字蛛

font-spider，也就是字蛛，原理简单来说就是，由于和英文或其他一些语言不同，中文的字多达几千上万个，而像英文只有26个字母，所以中文字体会非常大，那么如果获取 WebFont 中没有使用的字符，并将这些字符数据从字体中删除以实现压缩，同时生成跨浏览器使用的格式的话是不是字体文件就变得很小了呢。

我跟着官网上的教程安装了font-spider然后。。我之前说过我项目是Vue吧。结果SPA完全无法被解析。。。。。至此我只能先放置一下。

后记

我最后改回了系统字体，不玩自定义字体了。。