字体精简-字蛛font-spider
简介
记录一个精简字符的方式。利用字蛛做一些字体精简，本方式是针对英文精简，中文字体可以自行延展处理。
字蛛是一个智能 WebFont 压缩工具，它能自动分析出页面使用的 WebFont 并进行按需压缩。
安装字蛛
github：font-spider
npm install font-spider -g注意全局安装，省事，当然也可以局部，个人选择。
配置
安装完毕后我们需要新建一个html文件，这个文件里面需要配置一个自定义字体css，一个div，用于显示你需要精简的字体。
注意，被精简的字体文件必须是ttf格式。
创建一个index.html文件
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
@font-face {
font-family: "AbrilFatface-Regular";
src: url("./AbrilFatface-Regular.eot");
src: url("./AbrilFatface-Regular.eot?#font-spider") format("embedded-opentype"), url("./AbrilFatface-Regular.woff2") format("woff2"), url("./AbrilFatface-Regular.woff") format("woff"), url("./AbrilFatface-Regular.ttf") format("truetype"), url("./AbrilFatface-Regular.svg") format("svg");
font-weight: normal;
font-style: normal;
}
div {
font-family: "AbrilFatface-Regular";
}
</style>
</head>
<body>
<div>!"#$%&'()*+,-./0123456789:;
<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~</div>
</body>
</html>上述中，我声明了一个自定义的font-family，我们本地只需要准备一份ttf格式字体就行了，它能够url("./AbrilFatface-Regular.ttf")这样正确的被引入。就行了，其他的格式就算字体没有也没有关系。
字蛛会自动将@font-face中声明的字体格式一一生成，并精简。
所以不要纠结说我没有这个字体格式啊，我们用字蛛不就是为了生成这个格式嘛！
然后我们会有个div的class去显示声明调用该字体，因为字蛛会自动分析出页面使用的 WebFont 并进行按需压缩，所以必须要有元素使用这个字体。
在div元素中，我提供了目前字母数字特殊符号的文本，如果你精简时也是需要对这些字符做字体精简，那么直接copy就行了。
如果你有自己的字符，不在上述代码中，可自行添加上去。
js生成字符
const divDom = document.querySelector("div");
let str = "";
let num = 32;
for (; num < 127; num++) {
str += String.fromCharCode(num);
}
divDom.innerHTML = str;注意哦，动态生成的字符字蛛并不能抓取到，所以这个js生成好字符好自己复制再粘贴到html中保存
使用命令精简
html文件书写好后就可以使用命令了。
font-spider ./index.html完成后，会在html文件对应目录生成一个文件夹.font-spider，这个文件夹里放的是原字体文件ttf，目录其他的则是精简好的字体。
为什么为这样，你可以在回头看下@font-face。
至此，你已经可以进行字体精简了。
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿站点。未经许可，禁止转载。
暂无评论数据