font-spider字蛛有什么用?
在已知使用字符的情况下,压缩字体包,
把html中使用到的字符进行打包,生成新的字体包,减小体积
font-spider字蛛怎么用
1.Git下载https://github.com/aui/font-spider/tree/master/src
2.src中新建目录,如下图
3.index.html写入代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*声明 WebFont*/
@font-face {
font-family: 'DFGBZY9_FTO';
src: url('DFGBZY9_FTO.eot');
src:
url('DFGBZY9_FTO.eot?#font-spider') format('embedded-opentype'),
url('DFGBZY9_FTO.woff') format('woff'),
url('DFGBZY9_FTO.ttf') format('truetype'),
url('DFGBZY9_FTO.svg') format('svg');
font-weight: normal;
font-style: normal;
}
/*使用选择器指定字体*/
.DFGBZY9_FTO {
font-family: 'DFGBZY9_FTO';
}
/*声明 WebFont*/
@font-face {
font-family: 'Impact1';
src: url('Impact.eot');
src:
url('Impact.eot?#font-spider') format('embedded-opentype'),
url('Impact.woff') format('woff'),
url('Impact.ttf') format('truetype'),
url('Impact.svg') format('svg');
font-weight: normal;
font-style: normal;
}
/*使用选择器指定字体*/
.Impact1 {
font-family: 'Impact1';
}
</style>
</head>
<body>
<div class="DFGBZY9_FTO">
这里是DFGBZY9_FTO需要使用的字符,下边那个是Impact使用的字符
</div>
<div class="Impact1">./1234567890AqwertyuiopasdfghjklzxcvbnmL</div>
</body>
</html>
4.控制台运行 font-spider src/test/index.html
5.得到字蛛生成的新字体文件
踩坑记录:
@font-face,src写的目录不只是引用目录,
同时也是生成目录,
会改掉这里原本放的字体文件
下图的文件都是生成的结果
.font-spider中是自动备份,而不是结果