关于字体压缩的方案
程序员文章站
2022-07-12 17:14:33
...
方案一、使用 gulp-font-spider
源码：https://github.com/aui/gulp-font-spider
1.安装gulp-font-spider：
npm install gulp-font-spider --save-dev2.在gulpfile.js文件中添加：
var gulp = require( 'gulp' );
var fontSpider = require( 'gulp-font-spider' );
gulp.task('fontspider', function() {
return gulp.src('./index.html')
.pipe(fontSpider());
});
gulp.task('default', ['fontspider']);
3.搭建文件目录结构：
index.html内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div></div>
</body>
</html>css内容：
@font-face {
font-family: pingFangRegular;
src: url('../fonts/PingFangRegular.ttf');
}
body>div{
font-family: "pingFangRegular";
}4.执行gulp任务：
gulp default
执行完之后，就会在fonts文件夹下生成一个 .font-spider的文件夹，里面是压缩好的文件
方案二：直接使用 font-spider
源码：https://github.com/aui/font-spider
1.安装 font-spider：npm install font-spider --save-dev
npm install font-spider -g2.css文件：
/*声明 WebFont*/
@font-face {
font-family: 'pinghei';
src: url('../font/pinghei.eot');
src:
url('../font/pinghei.eot?#font-spider') format('embedded-opentype'),
url('../font/pinghei.woff') format('woff'),
url('../font/pinghei.ttf') format('truetype'),
url('../font/pinghei.svg') format('svg');
font-weight: normal;
font-style: normal;
}
/*使用选择器指定字体*/
.home h1, .demo > .test {
font-family: 'pinghei';
}3.运行font-spider:
font-spider ./demo/*.html
上一篇： 文件压缩
下一篇： 在已有工程中实现微信图片压缩
推荐阅读