前端加载的字体ttf文件可以保存到localStorage里吗？

Question

前端加载的字体ttf文件可以保存到localStorage里吗？

我的个人博客中使用了几款酷炫的字体，字体的引用文件较大，影响了加载的时间

有什么办法能将ttf文件更好存储起来,方便第二次的加载

@font-face {

 font-family: SentyCandy;

 src: url("static/font/SentyCandy-color.ttf");

 }

Answer 1

浏览器本身就会缓存资源啊.
正常情况下你不修改这个字体包,缓存能命中的话,第二次是不需要走网络传输的.

如果一定要优化,可以考虑字蛛方案(底层靠font-min),从原始字体包里拆分出你文章中用到的文字.

Answer 2

理论上还真可以，只要你把 ttf 转成 Base64。

不过同一个域的 LocalStorage 存储大小是有限制的，如果是西文字体还好一点儿，字母少字体包一般不会很大；中文字体包本身就大，转成 Base64 会更大，你试试看会不会超吧。。

P.S. CSS 里怎么用 Base64 字体请自行搜索 “font-family 使用 Base64 字体”，另外再一个是有了 Base64 怎么动态地增加一个 @font-family，这个可以搜 “JS 动态增加 style”。