字体文件优化实践
前言
这次项目中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
应用版安装
截图