拿UI给的字体直接用,字体太大,直接影响网站首次加载速度。利用 gulp-font-spider 提取用到的字体,去除没用到的字体,大大减少了加载字体文件的大小。
如果Vue项目要用压缩字体,用 fontmin 。
- 按需压缩:从原字体中剔除没有用到的字符,可以将数 MB 大小的中文字体压缩成几十 KB
- 简单可靠:完全基于 HTML 与 CSS 分析进行本地处理,无需 js 与服务端辅助
- 自动转码:将字体转码成所有浏览器支持的格式,包括老旧的 IE6 与现代浏览器
- 图标字体:除了常规的字体支持外,还支持图标字体(字蛛 v1.0.0 新特性)
Tips:
- 仅支持固定的文本与样式,不支持 javascript 动态插入的元素与样式
- .otf 字体需要转换成 .ttf 才能被压缩
- 仅支持
utf-8
编码的 HTML 与 CSS 文件 - CSS
content
属性只支持普通文本,不支持属性、计数器等特性
先安装 npm install gulp-font-spider --save-dev
var gulp = require( 'gulp' );
var fontSpider = require( 'gulp-font-spider' );
gulp.task('fontspider',function () {
gulp.src('./src/*.html')
.pipe(fontSpider())
})
//将压缩完的字体移到dist目录下,使用定时器是因为压缩字体完没有回调,可能会打包完之前就copy了字体文件
gulp.task('copyFont',function() {
setTimeout(function(){
return gulp
.src('./src/style/font/*.ttf')
.pipe(gulp.dest(dirs.dist + '/font'))
},2000)
})
gulp.task('defualt', ['fontspider']);
压缩完后会生产一个.font-spider的目录,会将原文件放到此目录,以后压缩的时候,会自动检测此目录提取此目录的文件压缩,不需要担心是否重新压缩的不是源文件。