【WEB文章】关于网页特殊字体包压缩（字蛛）的正确方法使用！

陌宇轩

陌宇轩

二零一八春节即将的到来，你是否还沉浸在回家的喜悦中呢！但是你们却不知道，对于行业的网页设计师来说，可能又在日夜的码各种春节活动促销活动。为什么会在今天写到这样的文章，有请接下来的图文报道.



故事起源于昨天笔者准备制作一个网页，但是由于网页预先设计好，内文以及所有字体都是使用方正楷体。(在这里普及一下方正楷体是方正公司旗下免费的一款字体，可作为使用。)网页制作的时候，预先直接调用字体包，慢着，直接调用方正楷体的字库包??传说中文字体广大深渊也汉字居多。这个时候我又看了看字库包的大小，足足的16MB，哇，假如就这样放在网页岂不是加载会很慢，而且嗨会影响用户的读取网页速度和流量。作为一个踩死蚂蚁都会哭的人，怎么会做这么真实的网页编写操作呢。




于是乎呢，灵机一动，不如压缩一下字体好了，熟悉的操作，打开日常的百度网页，字库字体压缩百度一下你就知道，眼神逐渐迷离，找了一个小时没看到一个有用的软件，就看到一个类似红蜘蛛的网页经常会打开，我就再想想这是什么鬼操作，看了半天，完全没搞懂什么操作，难道我就要以最终失败结束了吗，不可能，笔者怎么可能是这样的人。(要不是因为实则需要，我都懒得去找)最终慢慢的了解到了一个字蜘这样的操作，于是乎又开始百度字蜘怎么操作压缩。又花了将近一个小时的时间，还是完全没有头绪，根本就看不懂其他博客等等教程文章的拟写，这时候逐渐慢慢的开始想放弃了，可是呢转机就在此时出现了，最终前前后后将近花了四个小时的时间搞懂了这些操作，原来就这吗简单啊，就是呢找了这么多文章都没有一个较为详细的，所以笔者在结束自己的成功后写下这篇详细文章，分享给其他学习WEB的人。




字蜘<span]：经过蜘蛛式的爬取：制作网页中总共所需要的字体，然后进行自我压缩出所用到的字库包，原理即是去除其他网页中未用到的字体，最终自我生成一个新的字库包，这样的压缩操作，就可大大的节省字库包带来网页的访问速度以及其他影响。


首先我们需要给本低电脑配置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指定样时代码即可

[XHTML] 纯文本查看 复制代码

@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-spider ./你的网页文件夹路径地址/*.html。然后回车即可（font-spider结尾需要空格而后再写你的文件路径地址，星符号在这里代表文件夹目录下的所有html）

显示如果跟我下面这样，即代表压缩成功，恭喜你。




这时候我们走向站点文件夹中font查看我们的字库压缩到什么样的程度






其中.font-spider文件夹中是备份你原来的字库包，真正我们用到的是最外面的字库，我们可以看下大小，才3.48KB完完全全不影响我们的网站。再去看一下我们的网页，一样还是这样的效果。



此次的教程是用于网页制作中，利用其他字库包时能够进行轻松的访问，而不受影响。当然也可以利用PS切图的展示，但是可能会大大的增加我们的工作时间。


最后提前祝所有阅读人，你们春节快乐，多吃。


图片是直接调用外链接，文章亲自手写，如果图片涉及违规请说明更换。！

苏紫方璇

陌宇轩 发表于 2019-2-1 11:29
没有吧，我这边都可以看到鸭？

我这边显示“此图片来自微信公众平台未经允许不可引用”

陌宇轩

苏紫方璇 发表于 2019-2-1 11:30
我这边显示“此图片来自微信公众平台未经允许不可引用”

好的，我找时间替换一下

破碎ぃ

更改下引用的图片

威风的黑龙

图片挂了，但是设计网页的工具收下了。

苏紫方璇

楼主你的图片挂了

266277

我看文章是直接复制粘贴的把

q01081122

谢谢分享

psx1lin

谢谢分享

陌宇轩

266277 发表于 2019-1-31 21:26
我看文章是直接复制粘贴的把

自己写的谢谢，公众号也是自己的

陌宇轩

苏紫方璇 发表于 2019-1-31 21:12
楼主你的图片挂了

没有吧，我这边都可以看到鸭？