「前端设计」fontSpider 字蛛的使用
1、开场
第一次见到Web上见到奇怪的中文字体，还是在一个好友的Blog上看到的，如下图所示。
自己摸索了一下在Web下使用字体的流程，开一贴记录下来，防止老年痴呆。其中寻找字体倒是不难，因为又很多这样的网站，本文也会推荐一个。比较难的是字体压缩的过程。那么问题来了：那么为什么我们要进行字体压缩？
首先要知道，我们博大精深的中文不同于英语，英语只有26个字母，也就是说我如果要满足一种英文字体的需求的话，我只需要满足这26个字母就好了，然后拿着这26个字母去随意组合。但是中文不同于英语，中文的比划非常多，而且不同的比划组合起来还有会不同，因此中文字体的文件一般都很大，而这对Web来说，就是灾难。
这样的12.4MB放在现在的Web环境环境中，还是不容乐观的。因此我们可以通过字体压缩来把字体中不需要的比划去掉，例如：我需要使用字体的文字是曼亚灿的个人网站，那么我就可以把其中用到的比划从字体中提取出来，剩下的统统扔掉。我们需要借助的软件是：fontSpider（字蛛）。
注意：这里有个弊端，也就是说通过字体压缩，你只能对几个固定的字使用这个字体。
2、正式
2.1、下载需要的Web字体；
推荐网址：http://www.foundertype.com/，下载的字体文件是以.ttf，例如：font.ttf，下文操作都已该名字为例。
2.2、安装Node.JS
之所以要安装Node.JS是要为下一个步骤安装的软件提供运行环境，官网下载链接：http://nodejs.cn/download/。安装过程不用多说，一路回车。安装之后软件列表会出现三个程序：
安装完成之后在CMD窗口（最好以管理员身份打开）输入命令：node -v
C:\Users\myxc\Desktop\demo>node -v
v12.16.2出现v..即证明安装成功。
2.3、安装fontSpider
截至到这一步为止，才出现了这次所需要的核心程序。fontSpider就是可以帮助我们把中文字体中我们不需要的给除去，字蛛是一个中文字体压缩器。
打开CMD窗口，输入命令：
C:\Users\myxc\Desktop\demo>npm install font-spider -g下载成功后会显示：
C:\Users\myxc\Desktop\demo>npm install font-spider -g
C:\Users\myxc\AppData\Roaming\npm\font-spider -> C:\Users\myxc\AppData\Roaming\npm\node_modules\font-spider\bin\font-spider
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.12 (node_modules\font-spider\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.12: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
+ font-spider@1.3.5
updated 1 package in 33.518s
C:\Users\myxc\Desktop\demo>如果下载过程中出现错误，更换网络环境后，重新下载即可。
2.4、文件准备
写一个HTML页面，主要就是在这个hmtl页面内输入你需要应用字体的文字，例如：曼亚灿的个人网站 Man Yacan's Blog 关于本，注意，可以把重复的文字都给去除掉。然后需要在CSS里面使用@font-face引入你需要进行压缩的字体文件。当然，你可以直接把下面的HTML保存道本地，然后把字体放在同文件夹下即可使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@font-face {
font-family: "myFont";
src: url("font.ttf");
font-style: normal;
font-weight: normal;
}
.brand {
font-family: myFont, sans-serif;
font-weight: normal;
}
</style>
</head>
<body>
<div class="brand">曼亚灿的个人网站 Man Yacan's Blog 关于本</div>
</body>
</html>需要注意的是，这个页面里面要引入你需要的字体，可以直接把源字体文件放到与html文件同文件夹的根目录下，如上面的页面所示，字体文件更名为：font.ttf，并放到文件夹下。注意引入字体路径！注意引入字体路径！注意引入字体路径！
文件夹结构：
C:\Users\myxc\Desktop\demo>tree /f
卷 Windows 的文件夹 PATH 列表
卷序列号为 68B5-629B
C:.
demo.html
font.ttf
没有子文件夹
C:\Users\myxc\Desktop\demo>2.5、压缩字体
压缩的原理就是对html页面引入的字体处的文字进行分析，确定字体文件中哪些比划是我们需要的，我们就留下，不需要的就给扔了。
首先打开CMD，切换到源文件夹：
C:\>cd C:\Users\myxc\Desktop\demo
C:\Users\myxc\Desktop\demo>需要注意的是，尽量要在C盘操作，我第一次失败就是因为在D盘操作。
输入命令font-spider demo.html：
C:\Users\myxc\Desktop\demo>font-spider demo.html
Font family: myFont
Original size: 13039.024 KB
Include chars: 'BMYacglnos个于亚人关曼本灿的站网
Chars length: 22
Font id: cafde1811678b20c73727feba11c5d52
CSS selectors: .brand
Font files:
File font.ttf created: 14.164 KB
C:\Users\myxc\Desktop\demo>即可完成压缩操作，可以看到，压缩前后字体文件的明显对比，由13039.024 KB压缩到了14.164 KB，大小还是相当可观的。