【字蛛】如何压缩体积大的中文字体包

在移动端H5制作中，有需要用到特别得中文字体包的情况，但是中文字体包，真的很大很大...大到十几兆...比如下图中的字体包：

对于一个简单的H5来说，项目本身都没有1MB，这么大的字体包显然是一个很大的累赘...那么，如何解决字体包体积如此之大的问题呢？

刚开始，我还希望能找到类似于图片、视频这类的在线压缩软件一样，能有在线压缩字体的网站直接进行压缩，然后发现，我可能脑阔有点问题...

后来，get到了减小字体包体积的思路：将网站中没有用到的字符数据从字体中删除，以此来实现压缩，这样，就要用到字蛛:

如何使用呢？

在font-spider官方文档中其实讲解的很明白了，下面我们来讲解一个简单的示例

然后我们在浏览器中查看效果：

接下来，我们开始正式操作：

1、全局安装font-spider

npm install font-spider -g

2、在css中使用font

如图中css所示。

两个注意点：(1) @font-face中src定义的.ttf文件必须存在，其余的格式将由工具自动生成。

　　　　　 （2）开发阶段请使用相对路径的css与webFont

3、打开命令行，执行font-spider命令

如果压缩成功的话，紧接着会出现以下内容：

然后，我们查看文件目录会发现，工具将我们的目录结构也做了相应的改变：

打开浏览器看看效果：

显然，字体生效了~

为了再验证一下其它没出现的字体是不是真的被剔除了，我们新加一段文字：

然后我们刷新浏览器：

我们可以很清晰的看见，新出现的‘哈、下、看’这三个字显示的是默认字体，而出现过了的‘测、试、一’就显示正常。

所以，这足以验证我们的字体压缩很成功。

最后，我们再重新执行下命令进行压缩：font-spider ./index.html

现在就好了：

【字蛛】如何压缩体积大的中文字体包

原文：https://www.cnblogs.com/wannananana/p/11897641.html