博客字体美化—font-spider瘦身中文字体ttf文件

最近准备重新捣鼓一个个人博客，博客的标题我想用好看的中文字体，我想到了两种方法来实现：

1. 在网上下载喜欢的免费字体导入Photoshop或者sketch，生成标题的切图引入项目；
2. 直接引入字体文件；

因为我手里的电脑没有安装图像处理软件，所以我选用的是方法2，而由于中文的字库过于庞大，中文的字体文件体积也非常夸张。所以方法二中最重要的问题就是如何实现字体的瘦身，仅仅将需要用到的汉字引入项目，我使用的是一个叫做font-spider的开源工具，执行它需要node环境，比较适合前端来进行处理。

font-spier在执行时需要传入一个html的入口文件，然后它会解析出该项目中所有用到的外部字体，并重新生成过滤后的字体文件。

1. 下载所需要的字体文件（.ttf），我使用的自由字体网站搜集了很多免费商用的字体；
   

   
   可以看到我下载的字体足足有38M大，完全不适合在网页中引用。

2. 使用npm全局安装font-spider

npm install font-spider -g

3. 构建一个简单的项目，并引入需要压缩的字体文件：

// html文件，在其中加入需要使用到的汉字，并引入css

  

敏讷 客亦知夫水与月乎 敏于行而讷于言

//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;
}

文件结构如下：

4. 打开命令行，在当前项目执行下列命令：

font-spider index.html

应该能够看到下列输出：

现在项目引用的字体文件已经被压缩到了只有28kb，足以满足使用了；
该脚本会创建一个.font-spider目录，它将压缩前的源文件至于其中：

5. 将.ttf文件在线转换为各个浏览器支持的文件格式：
   

6. 将字体文件引入项目，并在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';
}

7. 查看效果：

   
   

总结：font-spider十分方便和强大，在有较大的web字体需求时可以考虑将其整合入前端构建流程，上文仅仅提供了一个demo解决一个小需求，更多的用法期待大家探索。