易网时代-编程资源站
易网时代-编程资源站 地址：(26条消息) font-spider压缩web font字体_IT~少年人的博客-CSDN博客
1、下载font-spider
基于node环境，必须先安装node。若未安装，自行去node官网下载安装。
npm i font-spider -g
2、项目目录
project
font-gzip.html
font
PingFangSC-Regular.ttf
PingFangSC-Semibold.ttf
PingFangSC-Medium.ttf
DINPro-Medium.ttf
HelveticaNeue.ttf
html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>font字体压缩</title>
<style>
@font-face {
font-family: PingFangSC-Regular;
src: url("./font/PingFangSC-Regular.ttf");
}
@font-face {
font-family: PingFangSC-Semibold;
src: url("./font/PingFangSC-Semibold.ttf");
}
@font-face {
font-family: PingFangSC-Medium;
src: url("./font/PingFangSC-Medium.ttf");
}
@font-face {
font-family: DINPro-Medium;
src: url("./font/DINPro-Medium.ttf");
}
@font-face {
font-family: HelveticaNeue;
src: url("./font/HelveticaNeue.ttf?#font-spider");
}
.p1 {
font-family: PingFangSC-Regular;
}
.p2 {
font-family: PingFangSC-Semibold;
}
.p3 {
font-family: PingFangSC-Medium;
}
.p4 {
font-family: DINPro-Medium;
}
.p5 {
font-family: HelveticaNeue;
}
</style>
</head>
<body>
<p>hello，world！你好呀</p>
<p>hello，world！你好呀</p>
<p>hello，world！你好呀</p>
<p>hello，world！你好呀</p>
<p>hello，world！你好呀</p>
</body>
</html>
3、压缩web font字体
在font-gzip.html目录下打开cmd窗口。
运行font-spider ./font-gzip.html
打开文件夹目录发现！！！
前后html加载font文件对比
压缩前：
压缩后：