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

如何加载自定义字体？

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';
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

到目前为止都非常简单，但是我引入之后，发现字体的加载非常缓慢，原来，中文字体由于文字数量庞大，所以字体文件也非常之大，我的字体文件就有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());
});

1
2
3
4
5
6
7
8
9
10
11
12

这两个任务很简单啦：

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

fontspider任务是把dist文件夹中的字体文件，变为压缩后的文件。

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

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



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





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

截自：http://blog.csdn.net/Creabine/article/details/55099602