文章目录

• 字体类型及引用
• 压缩字体库文件
• 其他

前言：绝大多数情况下网页制作为了美观，会额外引用第三方字体。很久以前会把特殊字体切成图片，但后期维护成本太大了，小小改动都需要设计师进行修改，人工成本实在太大了，亦或是让设计师修改成“web-safe”的字体，这样子实现出来的效果往往不尽如人意。但是通过css3，我们可以额外加载第三方字体库解决这个问题。不过，由于web字体库体积比较大，会导致页面加载缓慢。因此在前端性能优化中，第三方字体加载成了不可忽视的一环。

字体类型及引用

总所周知，我们在css里引入需要的字体是这样子写，这里有开源的思源黑体为例：

<style> /* * safari,chrome,opera,firefox支持ttf(true type font)和otf(open type font) * ie9+ 仅支持.eot(embedded opentype) * ie8及以下不支持@font-face规则 */ @font-face{  font-family: "SourceHanSansCN"; src:url('SourceHanSansCN-ExtraLight.ttf') format('truetype'), url('SourceHanSansCN-ExtraLight.eot?#iefix') format('embedded-opentype'); } .special{  font-family:"SourceHanSansCN"; font-size:12px; color:red; } </style>

但是一个小专题引用一整个web字体库也太夸张了，我们就想着能不能用到哪些字体就从字体库中抽取出来。

压缩字体库文件

字蛛 这个工具为中文字体压缩提供了可能而且上手很容易。

前提先安装好node.js，我的node.js版本是8.2.1，安装成功后输入命令通过npm包安装font-spider

npm install font-spider -g

然后像上述的css中引入字体文件，注意，不能是less/sess哦，不然会用font-spider会识别不了，而且ttf文件必须存在

 src
    |--index.html
    |--css
    |     |--index.css
    |     |--SourceHanSansCN-ExtraLight.ttf

在项目的根目录下运行命令：

font-spider *.html

然后就可以生产一个压缩后的字体文件库了。

不过字蛛也会有限制，例如只能处理utf-8编码的文件，不能处理动态生成的字体。

其他

那么动态字怎么处理呢，如果通过异步加载字体是否可以解决我们上面由于字体库过大导致页面加载慢的问题，应该使用哪种合适的策略缓存字体呢？待续…