字蛛是什么？
字蛛是一个中文字体压缩器
字体优化前后对比图
1、使用前字体包总共大小60.6MB
使用字蛛前.png
文件夹大小.png
2、使用前字体包总共大小13.4MB
使用字蛛后.png
文件夹大小.png
为什么要使用字蛛？
由于中文的字体体积太大，一般都是几M以上。英文字体文字部分由26个字母组成，所以字体文件通常不会太大；而中文汉字数量总共约有九万左右， 国标(GB)字库 有6763字, 而根据《现代汉语常用字表》统计数据，常用汉字也要有3500个左右。 中文字体文件通常都会几M的大小，参照现在中国的网络环境，显然不适合在项目中使用。
字蛛的来源及工作原理
官网：http://font-spider.org/
github源码：github.com/aui/font-spider
字蛛官网.png
原理:
1.爬行本地 html 文档，分析所有 css 语句
2.记录@font-face语句声明的字体，并且记录使用该字体的 css 选择器
3.通过 css 选择器的规则查找当前 html 文档的节点，记录节点上的文本
4.找到字体文件并删除没被使用的字符
5.编码成跨平台使用的字体格式
简而言之：就是爬出你项目中所使用的文字保留起来，删除没被使用到的文字，并重新打包。
该如何使用字蛛？
一、安装node.js
如果没有node，请安装安装node.js（这里不做详细介绍，可自行百度）。如果已经安装请看下一步。
二、安装字蛛
有vscode编辑器的可以在项目文件夹中打开终端，输入npm install font-spider -g
也可以打开Node.js command prompt如下图所示，并输入命令：npm install font-spider -g 回车执行
command prompt.png
npm install font-spider -g
安装字蛛.png
三、使用字蛛
1、新建一个font.html页面，下面是font.html中的内容。要根据自己文件夹中有的字体去引入，但是ttf格式的字体是一定要存在的。
注意：
- @font-face 中的 src 定义的 .ttf 文件必须存在，其余的格式将由工具自动生成。
- 开发阶段请使用相对路径的 CSS 与 WebFont
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*声明 WebFont*/
@font-face {
font-family: 'YaHeiBold';
src: url('./YaHeiBold.eot');
src:
url('./YaHeiBold.eot?#font-spider') format('embedded-opentype'),
url('./YaHeiBold.woff2') format('woff2'),
url('./YaHeiBold.woff') format('woff'),
url('./YaHeiBold.ttf') format('truetype'),
url('./YaHeiBold.svg') format('svg');
font-weight: normal;
font-style: normal;
}
</style>
</head>
<body>
</body>
</html>
结构.png
2、html文件构建好后，在终端输入font-spider + 你的font.html的位置，然后回车即可。
font-spider ./demo/*.html
页面依赖的字体将会自动压缩好，原 .ttf 字体会备份
压缩成功.png
3、有可能你会出现报错，像下图这样的。出现这样情况就是font.html中的字体路径错了。
image.png
image.png
网友评论