css引入外部字体的压缩方法，解决网页加载太慢

最近在做网站的时候，发现大多都是常见字体，想用@font-face引入一些特殊的字体，发现文件太大，动不动几十兆，影响网页加载速度，在网上找了半天，发现大多都是使用一款名字为字蛛的字体压缩器，http://font-spider.org/index.html，在网上找了很多文章，发现大多数文章都写得很乱，可能只有写得人自己看得懂，在这里写一个完善的步骤，方便以后查看

1. 安装nodeJs（已安装的可以跳过）
   打开命令行输入下面的命令，如果已安装则可以看到自己的nodejs版本，如果没安装则不会显示。

   $ node -v
   

   没安装的可以去官网 https://nodejs.org/en/download/。找到合适的版本安装即可，再在命令行输入上面的的命里，如果出现了版本号，则说明安装成功

2. 安装字蛛
   输以下命令安装即可

	npm install font-spider -g 

下图我项目里放置字体文件的路径F:\IdeaProjects\IoTWeb\web\font，这里一定要有tff格式的字体文件，其他的没有没关系

在css样式里写如下的代码引入样式，路径是相对路径，修改成自己放置字体文件的目录即可，KaiGenGothicSC-Normal是引入的字体的名称

@font-face {
    font-family: 'KaiGenGothicSC-Normal';
    src: url('../font/KaiGenGothicSC-Normal.ttf');
    src:
            url('../font/KaiGenGothicSC-Normal.eot?#font-spider') format('embedded-opentype'),
            url('../font/KaiGenGothicSC-Normal.woff') format('woff'),
            url('../font/KaiGenGothicSC-Normal.ttf') format('truetype'),
            url('../font/KaiGenGothicSC-Normal.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

3. 生成新的字体库
   命令行输入

font-spider F:\IdeaProjects\IoTWeb\web\*.jsp

【*】 是通配符，表示会扫描你这个项目web文件夹下面所有的jsp文件，然后回车即可，显示如下图，表示成功了

然后去自己的font文件夹下找到重新编译过的文件，在css里重新引入新生成的文件即可