字蛛——打破中文字体包繁重的窘境

前言

2016年末时，给摇一摇写一个手机端页面，实话说，拿到psd，平铺直叙的静态页，没什么技术含量，思索着是不是要换个雅观的字体。人总是想当然天真的以为中文的字体包能拿来直接用，然而现实给我一记重锤眩晕，一个粑粑字体包竟然要12mb，果然我还是太年轻。

这简直是一个大写的尴尬，年轻的我意识到，中国文化之所以博大精深，正是体现在生活中的点点滴滴，我滴天啊，只好删掉字体包，去掉@font-face，忙这忙那的，过去了三五天，直到那一抹柔情的出现……

一、那54kb的柔情，让我把持不住——压缩中文字体包的线索

转眼已经2017，接近年关，众多精致的微信H5纷繁而至，其中一个是智慧火车，从遥想当年绿皮到秒速97.222米，也只是弹指挥间，这之间有忘掉的，更有忘不掉的，简单有趣的回忆。
翻看这个H5的js和css文件，学到了很多东西，看到了css中的那段@font-face，嗯？通过url下载，果然是“别人家”的字体包要友好很多，只有54kb，这是什么黑科技！！！

还记得上学时老师说过的话吗，“我会教你百度的方法”，先来一波百度，效果不是很理想啊，都是些落后的字体软件，pass。久寻不得， 看来需要亲友团场外援助，得到的答案是——去百度。

姜还是老的辣，真相只有一个！！！

二、这一切一切的背后，只有真相——字蛛

字蛛官网：http://font-spider.org/

三、整装备战，蓄势待发——安装与使用

嗯，首先我们应该有nodejs，没有的赶紧安装啊！
node.js官网：https://nodejs.org/en/

安装过后记得看一下环境变量，输入path看看nodejs在不：

完美，有了nodejs，我们就可以用一行命令完成“字蛛”的安装：

npm install font-spider -g

到这里“字蛛”已然安装完成，最终需要我们落下打破中文字体包壁垒的最后一锤！
在css中使用webfont，我选择的是华文楷体（依稀记得有人用微软雅黑被告）：

    /*声明 WebFont*/    @font-face {        font-family: 'STKAITI';        src: url('../font/STKAITI.ttf');        src:                url('../font/STKAITI.eot?#font-spider') format('embedded-opentype'),                url('../font/STKAITI.woff') format('woff'),                url('../font/STKAITI.ttf') format('truetype'),                url('../font/STKAITI.svg') format('svg');        font-weight: normal;        font-style: normal;    }    /*使用选择器指定字体*/    span {        font-family: 'STKAITI';    }

最后一步
找到你的html文件位置，输入命令

font-spider .\somewhere\something.html

生成了新的字体文件

用完了，感觉棒棒的！！
让我们看一下最终效果，哒哒~

还记得程序员间流传至今的一句老话吗：

技术只会迟到，但从未缺席