最近准备重新捣鼓一个个人博客，博客的标题我想用好看的中文字体，我想到了两种方法来实现：
- 在网上下载喜欢的免费字体导入Photoshop或者sketch，生成标题的切图引入项目；
- 直接引入字体文件；
因为我手里的电脑没有安装图像处理软件，所以我选用的是方法2，而由于中文的字库过于庞大，中文的字体文件体积也非常夸张。所以方法二中最重要的问题就是如何实现字体的瘦身，仅仅将需要用到的汉字引入项目，我使用的是一个叫做font-spider的开源工具，执行它需要node环境，比较适合前端来进行处理。
font-spier在执行时需要传入一个html的入口文件，然后它会解析出该项目中所有用到的外部字体，并重新生成过滤后的字体文件。
-
下载所需要的字体文件（.ttf），我使用的自由字体网站搜集了很多免费商用的字体；
可以看到我下载的字体足足有38M大，完全不适合在网页中引用。 使用npm全局安装font-spider
npm install font-spider -g
- 构建一个简单的项目，并引入需要压缩的字体文件：
// html文件，在其中加入需要使用到的汉字，并引入css
<head>
<link rel="stylesheet" type="text/css" href="./index.css">
</head>
<div class="demo">敏讷 客亦知夫水与月乎 敏于行而讷于言</div>
//css，引入字体文件，并使用指定字体
@font-face {
font-family: 'source';
src: url('./title.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
/*使用指定字体*/
.demo {
font-family: 'source';
font-size: 30px;
}
文件结构如下：
- 打开命令行，在当前项目执行下列命令：
font-spider index.html
应该能够看到下列输出：
现在项目引用的字体文件已经被压缩到了只有28kb，足以满足使用了；
该脚本会创建一个
.font-spider目录，它将压缩前的源文件至于其中：
-
将.ttf文件在线转换为各个浏览器支持的文件格式：
将字体文件引入项目，并在css中使用字体：
@font-face {
font-family: "epitaph";
src: url("./assets/title_font/title.woff2") format("woff2"),
url("./assets/title_font/title.woff") format("woff"),
url("./assets/title_font/title.svg") format("svg"),
url('./assets/title_font/title.eot?#iefix') format('embedded-opentype'),
url("./assets/title_font/title.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
.title h1 {
font-size: 50px;
font-family: 'epitaph';
}
.title div {
font-size: 24px;
font-family: 'epitaph';
}
-
查看效果：
总结：font-spider十分方便和强大，在有较大的web字体需求时可以考虑将其整合入前端构建流程，上文仅仅提供了一个demo解决一个小需求，更多的用法期待大家探索。
