二零一八春节即将的到来，你是否还沉浸在回家的喜悦中呢！但是你们却不知道，对于行业的网页设计师来说，可能又在日夜的码各种春节活动促销活动。为什么会在今天写到这样的文章，有请接下来的图文报道.
故事起源于昨天笔者准备制作一个网页，但是由于网页预先设计好，内文以及所有字体都是使用方正楷体。(在这里普及一下方正楷体是方正公司旗下免费的一款字体，可作为使用。)网页制作的时候，预先直接调用字体包，慢着，直接调用方正楷体的字库包??传说中文字体广大深渊也汉字居多。这个时候我又看了看字库包的大小，足足的16MB，哇，假如就这样放在网页岂不是加载会很慢，而且嗨会影响用户的读取网页速度和流量。作为一个踩死蚂蚁都会哭的人，怎么会做这么真实的网页编写操作呢。
于是乎呢，灵机一动，不如压缩一下字体好了，熟悉的操作，打开日常的百度网页，字库字体压缩百度一下你就知道，眼神逐渐迷离，找了一个小时没看到一个有用的软件，就看到一个类似红蜘蛛的网页经常会打开，我就再想想这是什么鬼操作，看了半天，完全没搞懂什么操作，难道我就要以最终失败结束了吗，不可能，笔者怎么可能是这样的人。(要不是因为实则需要，我都懒得去找)最终慢慢的了解到了一个字蜘这样的操作，于是乎又开始百度字蜘怎么操作压缩。又花了将近一个小时的时间，还是完全没有头绪，根本就看不懂其他博客等等教程文章的拟写，这时候逐渐慢慢的开始想放弃了，可是呢转机就在此时出现了，最终前前后后将近花了四个小时的时间搞懂了这些操作，原来就这吗简单啊，就是呢找了这么多文章都没有一个较为详细的，所以笔者在结束自己的成功后写下这篇详细文章，分享给其他学习WEB的人。
字蜘：经过蜘蛛式的爬取：制作网页中总共所需要的字体，然后进行自我压缩出所用到的字库包，原理即是去除其他网页中未用到的字体，最终自我生成一个新的字库包，这样的压缩操作，就可大大的节省字库包带来网页的访问速度以及其他影响。
首先我们需要给本低电脑配置node.js文件，这个时候需要前往（https://nodejs.org/en/download）下载自己电脑所需要的node.js文件，比如笔者所需要到的就是64位的Windows文件!
笔者直接进行下载到桌面，然后进行傻瓜式安装即可，在这里的位置需要选择到第三个，继续进行Next，默认是安装到C盘下，也可以自定义目录安装。由于笔者是Windows10的电脑，所以在安装的时候请求到了管理员的权限。
安装完毕后，不需要运行，只需要记得文件安装的路劲即可！
按下键盘的Windows图案键 R键盘后出现文本窗口，输入cmd成功进行调出命令字符窗口，这个时候我们需要输入（font-spider -V）的命令查看Node.js是否安装成功，如果显示版本号。
如图上红框的所示，显示这样即代表安装成功！这个时候我们接着下一步，未来方便文章教程的真实，我们重新创建一个网页，进行字蛛的方式压缩，然后进行记录过程。
创建一个字蛛测试的网页，然后把我们预先要用到的字库包放在font的文件夹下。
我先把准备做工作一个个的准备好截图在下面展示。网页预先的创建
本地站点的创建
方正楷体字库包的存放
未进行CSS装饰时候网页中字体的显示
接下来我们给和h1中的文字进行创建CSS和进行配置CSS样式和调用楷体字体的字库包。只需要加入几行CSS指定样时代码即可
@font-face {
font-family: ‘fangzhekt_GBK’;/*字库包名*/
src: url(‘../font/fangzhekt_GBK.TTF’);/*字库包路径*/
src:
url(‘../font/fangzhekt_GBK.eot?#font-spider’) format(’embedded-opentype’),
url(‘../font/fangzhekt_GBK.woff’) format(‘woff’),
url(‘../font/fangzhekt_GBK.TTF’) format(‘truetype’),/*字库包路径*/
url(‘../font/fangzhekt_GBK.svg’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
/*使用选择器指定字体*/
h1{
font-family: ‘fangzhekt_GBK’;font-size: 60px;color:#E01316;;
}
如下
这里最需要注意的就是配置h1选择的字体必须跟上面声明的字库包名一致。代码中所标注带用字库包的路径必须为本低预先字库包的路径，其他即可不需要更更改，后续会经过压缩自动生成，但是声明路径的后缀名前面的东西必须得一致。
这个时候我们继续看一下网页中的展示情况。
成功显示，但是所用到的字体包大小没经过压缩，可能后续会造成网页的访问速度以及消耗访问者的大量流量。我们最后一步进行命令符窗口的压缩！
命令符窗口切换到D盘，因为我现在的网页站点文件是在D盘中进行创造的。
这时候我们走向站点文件夹中font查看我们的字库压缩到什么样的程度
其中.font-spider文件夹中是备份你原来的字库包，真正我们用到的是最外面的字库，我们可以看下大小，才3.48KB完完全全不影响我们的网站。再去看一下我们的网页，一样还是这样的效果。
您看此文用
·
秒，转发只需1秒呦~
