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

字体文件优化实践

前言

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

---

解决思路

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

---

font-spider

gulp-font-spider

可能存在的坑！！！

• 固然你都用 gulp 了，确定得先安装 node，把gulp相关的大概整明白（了解？）吧
• 须要有 python 环境，推荐 python2.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中，图中我关闭了天然没有）

---

font-spider

可能存在的坑！！！

• 建议 请再看看上面
• npm install -g node-gyp

安装

npm install font-spider -g
复制代码

• 安装完后 font-spider -V 检查是否安装成功

  

运行

font-spider ./*.html --debug
复制代码

• cd 到项目目录，再输入对相应的HTML文件 --debug是为了报错时能查看日志
• 结果和截图和上面一致

---

FontMin

应用版安装

github.com/ecomfe/font…

截图