『前端开发』- 字体文件大小优化实践

这次项目中UI小姐姐要求用平方等其他字体，遂引入了这些字体，打包的时候发现，OMG，一个字体文件竟然要10M，实在不能忍，于是开始了字体文件大小的优化实践，最后变成38KB一个，还行吧。

解决思路

• font-spider 字蛛 原理是通过爬取HTML文件以及关联的CSS，找到设置了字体的样式，再爬取相关的的字符，排序去重，最后只针对这些字符保留字体文件相应的字符，从而达到大大缩小文件体积大小的目的。
  缺点 ：从它的原理可易知，它的致命缺陷就是有可能无法保留js脚本动态添加的字符的字体文件，及对于页面中存在大量文字动态删减增加等情况不够友好，如果是这种情况下，建议再找别的解决方案。
  打包 ：存在 gulp 以及 grunt 相关插件的解决方案，也可以通过控制台输入指令来生成压缩后的字体文件
• FontMin 其实这个与字蛛差不多相同，字蛛有的它都有，但值得一提的是，FontMin 还有个应用文件版本，可以通过拖动字体文件和手动输入可能存在的字符来压缩字体文件。

font-spider

gulp-font-spider

可能存在的坑！！！

• 当然你都用 gulp 了，肯定得先 安装 node ，把gulp相关的大概整明白（了解？）吧
• 需要有 python 环境 ，推荐 python 2.7 版本的
• 文件路径确保正确且当你运行 fontSpider 已存在
• 如果压缩后的字体文件出现了，但是大小没变或者变化不明显，很大可能是源字体文件的问题！！我当初一开始使用的平方字体就总是压缩后体积一点没变，这几种方法我都试了，但结果都一样，我去它们的 GitHub 上看 issue 找到了灵感，当我换了别的字体果然可以了，最后找到了个可以压缩的平方字体，遂。

安装

npm install gulp-font-spider --save-dev
复制代码

• 确保安装成功，缺啥再 npm install 啥

CSS

// html没什么特别的，引入CSS文件的时候路径注意就好了

@charset "UTF-8";

// 注意引入时使用相对路径
@font-face {
    font-family: 'pinghei';
    src: url('../../assets/font/pinghei.eot');
    src: 
      url('../../assets/font/pinghei.eot?#font-spider') format('embedded-opentype'),
      url('../../assets/font/pinghei.woff') format('woff'),
      url('../../assets/font/pinghei.ttf') format('truetype'), // 只要确保运行时这个ttf文件在就好了，其它不用管
      url('../../assets/font/pinghei.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: pinghei; //使用字体
}
复制代码

gulpfile.js

/**
 * 此为gulp4.0的配置文件
 */
var gulp = require('gulp'),
    fontSpider = require( 'gulp-font-spider'); //字体文件优化--字蛛

/**
 * fontSpider
 */
gulp.task('fontSpider', done => {
    gulp
	.src(buildPath.html) // 引入相应的html文件
        .pipe(fontSpider({
            backup: false // 不备份源字体，默认开启备份
        }))
        .pipe(notify({
            message: "font compress done" // 完成后通知
        }))
        done(); //结束这个task
});

/**
 * gulp 默认指令
 */
// 其实开发阶段无所谓压不压缩字体，所以开发阶段，我只是将源字体copy过去即可

/**
 * gulp build
 * 这里我将fontSpider这个task在最后执行，因为这样确保打包后的html和css文件都已存在了，
 * 此时在针对编译后的dist里的html文件里进行筛选字体文件压缩，这样更有效
 */
gulp.task('build', 
    gulp.series('clean', 'styles', 'html',  // 串行运行
        gulp.parallel('js', 'vendor', 'copyAssets'),  //并行运行
    'fontSpider') //最后运行
);
复制代码

截图展示

gulp build

文件夹检查（如果开启备份，则源字体文件在.font-spider中，图中我关闭了自然没有）