font-spider压缩web font字体
发布于2020-11-19 20:36 阅读(1085) 评论(0) 点赞(20) 收藏(0)
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 lang="en">
<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 class="p1">hello，world！你好呀</p>
<p class="p2">hello，world！你好呀</p>
<p class="p3">hello，world！你好呀</p>
<p class="p4">hello，world！你好呀</p>
<p class="p5">hello，world！你好呀</p>
</body>
</html>
3、压缩web font字体
在font-gzip.html目录下打开cmd窗口。
运行font-spider ./font-gzip.html
打开文件夹目录发现！！！
前后html加载font文件对比
压缩前：
压缩后：
所属网站分类: 技术文章 > 博客
作者：天使之恋
链接：http://www.javaheidong.com/blog/article/855/a50d362ba159c92078a2/
来源：java黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力