压缩字体 gulp-font-spider

拿UI给的字体直接用,字体太大,直接影响网站首次加载速度。利用 gulp-font-spider 提取用到的字体,去除没用到的字体,大大减少了加载字体文件的大小。
如果Vue项目要用压缩字体,用 fontmin 。

官网 http://font-spider.org

  1. 按需压缩:从原字体中剔除没有用到的字符,可以将数 MB 大小的中文字体压缩成几十 KB
  2. 简单可靠:完全基于 HTML 与 CSS 分析进行本地处理,无需 js 与服务端辅助
  3. 自动转码:将字体转码成所有浏览器支持的格式,包括老旧的 IE6 与现代浏览器
  4. 图标字体:除了常规的字体支持外,还支持图标字体(字蛛 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的目录,会将原文件放到此目录,以后压缩的时候,会自动检测此目录提取此目录的文件压缩,不需要担心是否重新压缩的不是源文件。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值