【WEB文章】关于网页特殊字体包压缩（字蛛）的正确方法使用！
本帖最后由 陌宇轩 于 2019-1-31 19:36 编辑陌宇轩
https://static.52pojie.cn/static/image/hrline/1.gifhttps://static.52pojie.cn/static/image/hrline/1.gifhttps://static.52pojie.cn/static/image/hrline/1.gif
二零一八春节即将的到来，你是否还沉浸在回家的喜悦中呢！但是你们却不知道，对于行业的网页设计师来说，可能又在日夜的码各种春节活动促销活动。为什么会在今天写到这样的文章，有请接下来的图文报道.
https://static.52pojie.cn/static/image/hrline/1.gifhttps://static.52pojie.cn/static/image/hrline/1.gifhttps://static.52pojie.cn/static/image/hrline/1.gif
故事起源于昨天笔者准备制作一个网页，但是由于网页预先设计好，内文以及所有字体都是使用方正楷体。(在这里普及一下方正楷体是方正公司旗下免费的一款字体，可作为使用。)网页制作的时候，预先直接调用字体包，慢着，直接调用方正楷体的字库包??传说中文字体广大深渊也汉字居多。这个时候我又看了看字库包的大小，足足的16MB，哇，假如就这样放在网页岂不是加载会很慢，而且嗨会影响用户的读取网页速度和流量。作为一个踩死蚂蚁都会哭的人，怎么会做这么真实的网页编写操作呢。
https://static.52pojie.cn/static/image/hrline/1.gifhttps://static.52pojie.cn/static/image/hrline/1.gifhttps://static.52pojie.cn/static/image/hrline/1.gif
于是乎呢，灵机一动，不如压缩一下字体好了，熟悉的操作，打开日常的百度网页，字库字体压缩百度一下你就知道，眼神逐渐迷离，找了一个小时没看到一个有用的软件，就看到一个类似红蜘蛛的网页经常会打开，我就再想想这是什么鬼操作，看了半天，完全没搞懂什么操作，难道我就要以最终失败结束了吗，不可能，笔者怎么可能是这样的人。(要不是因为实则需要，我都懒得去找)最终慢慢的了解到了一个字蜘这样的操作，于是乎又开始百度字蜘怎么操作压缩。又花了将近一个小时的时间，还是完全没有头绪，根本就看不懂其他博客等等教程文章的拟写，这时候逐渐慢慢的开始想放弃了，可是呢转机就在此时出现了，最终前前后后将近花了四个小时的时间搞懂了这些操作，原来就这吗简单啊，就是呢找了这么多文章都没有一个较为详细的，所以笔者在结束自己的成功后写下这篇详细文章，分享给其他学习WEB的人。
https://static.52pojie.cn/static/image/hrline/1.gifhttps://static.52pojie.cn/static/image/hrline/1.gifhttps://static.52pojie.cn/static/image/hrline/1.gif
字蜘<span]：经过蜘蛛式的爬取：制作网页中总共所需要的字体，然后进行自我压缩出所用到的字库包，原理即是去除其他网页中未用到的字体，最终自我生成一个新的字库包，这样的压缩操作，就可大大的节省字库包带来网页的访问速度以及其他影响。
首先我们需要给本低电脑配置node.js文件，这个时候需要前往（https://nodejs.org/en/download）下载自己电脑所需要的node.js文件，比如笔者所需要到的就是64位的Windows文件!
笔者直接进行下载到桌面，然后进行傻瓜式安装即可，在这里的位置需要选择到第三个，继续进行Next，默认是安装到C盘下，也可以自定义目录安装。由于笔者是Windows10的电脑，所以在安装的时候请求到了管理员的权限。
https://mmbiz.qpic.cn/mmbiz_jpg/N0DEXVNS2eUtTkLBE7SCo0POL894x2e4xSLIr5zG7lmYrhhhsqj82zVQX4ZGPn5OYzbH065P7ItrgROOHtbS4A/640?wx_fmt=jpeg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1
安装完毕后，不需要运行，只需要记得文件安装的路劲即可！
https://mmbiz.qpic.cn/mmbiz_png/N0DEXVNS2eUtTkLBE7SCo0POL894x2e4spjHUt7Gdhg8hAZlScIxZ80eOr7tdlMTxd0ibCXviaAuLspSicLEo1icCA/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1
按下键盘的Windows图案键+R键盘后出现文本窗口，输入cmd成功进行调出命令字符窗口，这个时候我们需要输入（font-spider-V）的命令查看Node.js是否安装成功，如果显示版本号。
https://mmbiz.qpic.cn/mmbiz_png/N0DEXVNS2eUtTkLBE7SCo0POL894x2e4JzSuoJy5wm8XasyhXKYcTribOw3icslfKmSTQx2GVnZxhWZYyuicxnCOA/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1
如图上红框的所示，显示这样即代表安装成功！这个时候我们接着下一步，未来方便文章教程的真实，我们重新创建一个网页，进行字蛛的方式压缩，然后进行记录过程。创建一个字蛛测试的网页，然后把我们预先要用到的字库包放在font的文件夹下。
我先把准备做工作一个个的准备好截图在下面展示。网页预先的创建
https://mmbiz.qpic.cn/mmbiz_png/N0DEXVNS2eUtTkLBE7SCo0POL894x2e4RtV4vbQxx9hbJv56ss6LHE47TriaT8hVkPDVsdovtYl5siahIvpVYStg/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1
本地站点的创建
https://mmbiz.qpic.cn/mmbiz_png/N0DEXVNS2eUtTkLBE7SCo0POL894x2e4bDcK1GE9OD6pSOMbo4218iclib0Imn1MBSGz7SapKgXEcoplD5zcA9Aw/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1
方正楷体字库包的存放
https://mmbiz.qpic.cn/mmbiz_png/N0DEXVNS2eUtTkLBE7SCo0POL894x2e4WYjyCKpBATc0FItB0VKpp5Aj1rlAX465RKJ9L5mf2vItfzLCdzibk1Q/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1
未进行CSS装饰时候网页中字体的显示
https://mmbiz.qpic.cn/mmbiz_png/N0DEXVNS2eUtTkLBE7SCo0POL894x2e4u3KfASnbbOYASH3jNmX6KymoCHlTicQ6lqyTGUHaOBzv4arYdia5dxmA/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1
接下来我们给和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;;
}
如下
https://mmbiz.qpic.cn/mmbiz_png/N0DEXVNS2eUtTkLBE7SCo0POL894x2e4Vj99UddxupCiaYj93TDQVyBFdGEibVTuEuDRiabcJxFCumib6KtyibrkqpA/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1
这里最需要注意的就是配置h1选择的字体必须跟上面声明的字库包名一致。代码中所标注带用字库包的路径必须为本低预先字库包的路径，其他即可不需要更更改，后续会经过压缩自动生成，但是声明路径的后缀名前面的东西必须得一致。
这个时候我们继续看一下网页中的展示情况。
https://mmbiz.qpic.cn/mmbiz_png/N0DEXVNS2eUtTkLBE7SCo0POL894x2e4Gn2oL07Buib1rKwjqKHzIIURffL55t33U5r1bIQfjPWEeYdfHUJAQVA/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1
成功显示，但是所用到的字体包大小没经过压缩，可能后续会造成网页的访问速度以及消耗访问者的大量流量。我们最后一步进行命令符窗口的压缩！命令符窗口切换到D盘，因为我现在的网页站点文件是在D盘中进行创造的。
https://mmbiz.qpic.cn/mmbiz_png/N0DEXVNS2eUtTkLBE7SCo0POL894x2e4O6o2frUKIMhDQq0uoDgjTibOWn3m2OicUtV94jXyN6dJviabDPDmb4SGg/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1
进行输入字蛛压缩字符font-spider ./你的网页文件夹路径地址/*.html。然后回车即可（font-spider结尾需要空格而后再写你的文件路径地址，星符号在这里代表文件夹目录下的所有html）
显示如果跟我下面这样，即代表压缩成功，恭喜你。
https://mmbiz.qpic.cn/mmbiz_png/N0DEXVNS2eUtTkLBE7SCo0POL894x2e4oXichVezr2YLHdO56aZtBHxTPw93qt5lFHw7Nv6gJQbBV7A7oNoQHYw/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1
这时候我们走向站点文件夹中font查看我们的字库压缩到什么样的程度
https://mmbiz.qpic.cn/mmbiz_png/N0DEXVNS2eUtTkLBE7SCo0POL894x2e4yb0GqOqYru8BElFuxbeHVHyDN81kdIZfZzpIE3P2xJukPGdTHjjjvw/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1
其中.font-spider文件夹中是备份你原来的字库包，真正我们用到的是最外面的字库，我们可以看下大小，才3.48KB完完全全不影响我们的网站。再去看一下我们的网页，一样还是这样的效果。
https://mmbiz.qpic.cn/mmbiz_png/N0DEXVNS2eUtTkLBE7SCo0POL894x2e4LjEYNkPT7xia2CX9LKM2sRROZut3CxxnOO3KWUEwiarZfnAMfUYa7N0Q/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1
此次的教程是用于网页制作中，利用其他字库包时能够进行轻松的访问，而不受影响。当然也可以利用PS切图的展示，但是可能会大大的增加我们的工作时间。
最后提前祝所有阅读人，你们春节快乐，多吃。https://static.52pojie.cn/static/image/hrline/1.gifhttps://static.52pojie.cn/static/image/hrline/1.gifhttps://static.52pojie.cn/static/image/hrline/1.gif
图片是直接调用外链接，文章亲自手写，如果图片涉及违规请说明更换。！
陌宇轩 发表于 2019-2-1 11:29
没有吧，我这边都可以看到鸭？
我这边显示“此图片来自微信公众平台未经允许不可引用” 苏紫方璇 发表于 2019-2-1 11:30
我这边显示“此图片来自微信公众平台未经允许不可引用”
好的，我找时间替换一下{:1_907:} 更改下引用的图片 图片挂了，但是设计网页的工具收下了。 楼主你的图片挂了 我看文章是直接复制粘贴的把 谢谢分享 谢谢分享 266277 发表于 2019-1-31 21:26
我看文章是直接复制粘贴的把
自己写的谢谢，公众号也是自己的 苏紫方璇 发表于 2019-1-31 21:12
楼主你的图片挂了
没有吧，我这边都可以看到鸭？
页:
[1]
2