Compressed font gulp-font-spider

Use the fonts given by the UI directly. If the fonts are too large, they will directly affect the first loading speed of the website. Use gulp-font-spider to extract used fonts, remove unused fonts, and greatly reduce the size of loaded font files.
If you want to use compressed fonts for your Vue project, use fontmin.

Official website  http://font-spider.org

1. On-demand compression: remove unused characters from the original font, and compress Chinese fonts of several MB into dozens of KB
2. Simple and reliable: local processing is completely based on HTML and CSS analysis, without js and server assistance
3. Automatic transcoding: transcode fonts into formats supported by all browsers, including old IE6 and modern browsers
4. Icon font: In addition to the regular font support, it also supports icon fonts (new feature of Zizhi v1.0.0)

Tips:

• Only supports fixed text and styles, does not support javascript dynamically inserted elements and styles
• .otf fonts need to be converted to .ttf to be compressed
• Only supports  utf-8 encoded HTML and CSS files
• CSS  content properties only support normal text, not properties, counters, etc.

Install first 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']);

 

After compression, a .font-spider directory will be produced, and the original files will be placed in this directory. When compressing in the future, this directory will be automatically detected to extract the file compression in this directory, and there is no need to worry about whether the recompressed files are not the source files.