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

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Creabine/article/details/55099602

今天是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%,小了不是一点点,棒棒哒!!!

展开阅读全文

没有更多推荐了,返回首页