原文链接：使用 font-spider 对 webfont 网页字体进行压缩

随着当前 Web 技术的日新月异，网页界面内容越来越丰富，让人眼花缭乱，其中就包括了网页中的各种自定义字体。

例如，个人博客的首页字体：

CSS3 引入的 @font-face 这一属性可以很好的解决这个问题，可以帮助我们非常灵活的使用一些特殊的字体，即使用户电脑里面没有安装这个字体，网页也可以显示。

EOT 字体是 IE 浏览器的首选格式，其他浏览器都不支持；其他浏览器更钟爱常见的 TTF、SVG、WOFF。

基本语法如下：

@font-face { font-family: <自定义一个字体的名称>; src: url('<下载好的字体，在电脑中保存的路径>'); font-variant: <font-variant>; font-stretch: <font-stretch>; font-style: <style>; font-weight: <weight>;

例如：

@font-face { font-family: 'Lora'; src: url('../fonts/STKaiti.eot'); /* IE9 Compat Modes */ src: url('../fonts/STKaiti.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/STKaiti.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/STKaiti.woff') format('woff'), /* Modern Browsers */ url('../fonts/STKaiti.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/STKaiti.svg#STKaiti') format('svg'); /* Legacy iOS */ font-style: normal; font-weight: normal; } body { font-family: STKaiti; ... }

测试效果：Chrome，Firefox，IE7-IE11 均可以实现

1. 字体难题

自定义中文字体虽炫酷，但有一个弊端，那就是中文字体太大了，很耗费资源，具体的原因其实很简单：英文只有 26 个字母，一张 ASCII 码表上 128 个字符集几乎可以表示任何英文语句。由于字符集小，字体文件也可以做的非常小；中文字体就完全不同，单单 GB2313 编码的中文字符（含符号）就达到 7445 个，字符数量是 ASCII 码表的 58 倍，而字体设计师需要为每一个中文字符设计字体，简单计算下，中文字体文件大小也几乎达到英文字体文件的数十倍。

2. 解决思路

解决思路其实也很简单，只在字库中保留页面中出现的文字，将其他大量不用的文字删掉，生成一个只包含特定字符的小字体文件，便可以大大减少字体文件，从而提高访问速度。现在思路有了，那么有没有现成的工具呢？

3. 裁剪工具

还真有。经过我一番搜寻，找到了两款工具：一个是华人开发的「字蛛」，英文名 font-spider，依赖 Node.js 环境，是一款命令行工具。主要思路是采集线上网页使用到的字体，从字体文件中分离出来，完成大幅度压缩。另一个是腾讯的大佬改版后的 font-soider，叫 font-spider-plus。它们的工作原理如下：

我选择使用 font-spider-plus，毕竟改版过的，bug 更少，功能更多，还支持线上动态渲染的页面。唯一的不足就是官方文档写的太含糊了，许多人看了根本不知道怎么用。下面我将给我一个详细的范例，手把手教你如何使用 font-spider-plus。

4. font-spider-plus 使用方法

根据官方文档，要想使用 font-spider-plus，首先要在 CSS 文件中通过 @font-face 引入全量大小的特殊字体。具体怎么做呢？并没有说，我来告诉你。

书写 HTML 文件

首先我们新建一个文件夹用来放 html 文件：

$ mkdir index

然后在 index 目录中创建一个 index.html 文件，内容如下：

<div class="test"> 米开朗基杨 </div> <style> @font-face { font-family: 'font'; src: url('../fonts/<font>.eot'); src: url('../fonts/<font>.eot?#font-spider') format('embedded-opentype'), url('../fonts/<font>.woff2') format('woff2'), url('../fonts/<font>.woff') format('woff'), url('../fonts/<font>.ttf') format('truetype'), url('../fonts/<font>.svg') format('svg'); font-weight: normal; font-style: normal; } .test{ font-family: 'font'; } </style>

请将<div class="test"> </div> 中的文字换成你自己的网站的文字。你可以选择将你的博客所有文章内容全选，然后粘贴到此处。

下载你想使用的字体到 fonts 文件夹，然后将 index.html 中的 <font> 换成你下载的字体的前缀。

特别说明： @font-face 中的 src 定义的 .ttf 文件必须存在，其余的格式将由工具自动生成