「前端设计」fontSpider 字蛛的使用

让网页引入中文字体成为可能.

请注意，本文编写于 1122 天前，最后修改于 171 天前，其中某些信息可能已经过时。

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/。安装过程不用多说，一路回车。安装之后软件列表会出现三个程序：

Node.JS

安装完成之后在CMD窗口（最好以管理员身份打开）输入命令：node -v

代码语言：javascript

复制

C:\Users\myxc\Desktop\demo>node -v
v12.16.2

出现v..即证明安装成功。

2.3、安装fontSpider

截至到这一步为止，才出现了这次所需要的核心程序。fontSpider就是可以帮助我们把中文字体中我们不需要的给除去，字蛛是一个中文字体压缩器。

打开CMD窗口，输入命令：

代码语言：javascript

复制

C:\Users\myxc\Desktop\demo>npm install font-spider -g

下载成功后会显示：

代码语言：javascript

复制

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保存道本地，然后把字体放在同文件夹下即可使用。

代码语言：javascript

复制

<!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;
    }
&lt;/style&gt;

</head>
<body>

<div class="brand">曼亚灿的个人网站 Man Yacan's Blog 关于本</div>
</body>
</html>

需要注意的是，这个页面里面要引入你需要的字体，可以直接把源字体文件放到与html文件同文件夹的根目录下，如上面的页面所示，字体文件更名为：font.ttf，并放到文件夹下。注意引入字体路径！注意引入字体路径！注意引入字体路径！

文件夹结构：

代码语言：javascript

复制

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，切换到源文件夹：

代码语言：javascript

复制

C:&gt;cd C:\Users\myxc\Desktop\demo

C:\Users\myxc\Desktop\demo>

需要注意的是，尽量要在C盘操作，我第一次失败就是因为在D盘操作。

输入命令font-spider demo.html：

代码语言：javascript

复制

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，大小还是相当可观的。

----- END -----