font-spider 让网页引入中文字体成为可能

随着互联网的飞速发展，人们已经不满足于在web页面上使用一些默认字体了，但是页面引入字体文件体积很大加载又费时，那是怎么办呢？今天介绍的这个工具就可以完美的解决这个问题

介绍

字蛛是一个智能 WebFont 压缩工具，它能自动分析出页面使用的 WebFont 并进行按需压缩。

具体意思就是说你可以在页面直接引入字体，它能自动检测 css 里 @font-face 自定义的字体，并且从字体里提取出页面中有用到的字体，极大的减少了字体文件的空间。

前置知识

• 会css、html、nodeJs、npm的基础操作

食用说明

安装

安装好 nodeJs 后，安装 font-spider，执行命令：

npm install font-spider -g

命令执行完后可以执行

font-spider -V

查看是否安装成功，安装成功的话会输出版本号

使用

在 css 里定义 @font-face 引入字体文件，并在需要使用字体的地方定义 font-family 。

@font-face {
  font-family: '字体名字';
  src: url('字体路径');
}

p {
  font-family: '字体名字';
}

现在是整个过程中最重要的一步了 - 把使用到的字体从字体文件中提取出来，在 html 文件所在的位置打开命令行，执行古娜拉黑暗神命令：

font-spider *.html

* 号代表匹配当前文件夹下的所有 .html 后缀的文件

命令执行成功之后，压缩过后的字体文件会覆盖原来的字体文件，并且会生成一个 .font-spider 文件夹，这个文件夹存放的是压缩之前的字体文件。

字蛛只是对原来的字体文件进行了一些 提取 的操作，不会影响字体本身的样式，可以放心使用

• 字蛛官网：http://font-spider.org/
• 字蛛github：https://github.com/aui/font-spider

（更多复杂的操作可以参考 git 的文档，这里只是对字蛛提供一个简单的使用 demo，mama再也不用担心我的页面没有酷炫的汉字了~）