前端加载自定义字体及速度优化

今天是2.14情人节，也是另一个重要的日子，那就是我的第一个全栈项目上线啦~~~

www.daren.com

这个是公司的官网，采用Python+Django做后端，前端也用了gulp自动化工作流，使用了前后端分离的开发方式，从年前弄到现在，虽然之后肯定还会有小的迭代和修改，一些轮播等效果还暂时处于display：none的状态，但是终于可以算是第一版上线了！能适配主流浏览器的PC端和移动端，在做官网的过程中，真的学到了很多，之前学的东西都一个个记在博客上了，今天来记一个新的问题，就是字体。

目前前端加载自定义字体越来越多了，我们的官网中也有这个需求，要改变一部分字体，这里来记录一下：

如何加载自定义字体？

CSS3中，使用@font-face即可加载自定义字体了。
推荐的跨浏览器 @font-face CSS 写法：

/*声明 WebFont*/
@font-face {font-family:'YourWebFontName';src:url('../font/YourWebFontName.eot');src:url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */url('YourWebFontName.woff') format('woff'), /* Modern Browsers */url('YourWebFontName.ttf')  format('truetype'), /* Safari, Android, iOS */url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */font-weight:normal;font-style:normal;
}/*使用选择器指定字体*/
.home h1, .demo > .test {font-family:'YourWebFontName';
}

到目前为止都非常简单，但是我引入之后，发现字体的加载非常缓慢，原来，中文字体由于文字数量庞大，所以字体文件也非常之大，我的字体文件就有4M，页面加载之后，还需要很长的时间来下载字体，下载完成之后，才会正确显示，在用户看来，就是打开页面很久之后字体又变了，体验非常不好。

字体文件太大，加载慢，怎么办呢？

这时候就要github一下了，最终发现了一个神器： font-spider

简单来说，font-spider的工作原理是这样的：中文字体文件之所以很大，是因为英语只有26个字母，而中文的汉字有好多好多个，所以文件相对来说就会大很多。font-spider就是从你的css文件的@font-face入手，去查找字体，然后遍历你的html文件，从css和html文件中就可以找到那些你实际上使用的文字，取出这些文字之后，再将他们单独变成字体文件，这样，就去掉了绝大部分其实用不到的文字，体积也会缩小很多很多。

看完之后发现这东西真是太棒了，赶紧来试试，由于我使用了gulp，就直接用相应的构建工具gulp-font-spider

如何使用 gulp-font-spider

第一步当然是安装了：npm install gulp-font-spider --save-dev

接下来在gulpfile.js中，编写任务：

//font任务，从app复制字体到dist
gulp.task('font', function() {return gulp.src("app/fonts/**/*").pipe(plumber())        .pipe(gulp.dest("dist/static/fonts")).pipe(browserSync.stream());
});
// fontspider任务，在dist中压缩字体文件并替换。成功后会发现dist/fonts中的字体文件比app/fonts中的小了很多
gulp.task('fontspider', function() {return gulp.src('dist/*.html')  //只要告诉它html文件所在的文件夹就可以了，超方便.pipe(fontSpider());
});

这两个任务很简单啦：

font任务是把开发文件夹app里边的字体文件复制到编译之后的文件夹dist中。
fontspider任务是把dist文件夹中的字体文件，变为压缩后的文件。

显然的，由于这俩任务的关系以及font-spider的工作原理，我们在编写default任务的时候，记得一定要保证html，sass/css，font相关的任务执行完之后，再来执行fontspider任务，不然肯定会出错的啦~

最后，简单看看执行成功的样子：

然后愉快的确认一下效果：

31/3951≈0.7846% 字体文件缩小到了原来的0.7846%，小了不是一点点，棒棒哒！！！