Front-load custom font and speed optimization

How to load a custom font.

CSS3, you can load a custom font using @font-face.
Recommended cross-browser @font-face CSS notation:

/* Declaration 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;
}

* * Use the selector to specify
the font/. Home h1,. Demo > Test {
    font-family: ' Yourwebfontname ';
}

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

So far so simple, but after I introduced it, found that the loading of fonts is very slow, originally, Chinese fonts because of the large number of characters, so the font file is also very large, my font file has 4 m, after the page load, still need a long time to download fonts, download finished, will be correctly displayed, in the user's view , is to open the page a long time after the font has changed, the experience is very bad. The font file is too large to load slowly, how to do it.

This time will be GitHub, and finally found an artifact: Font-spider

In simple terms, Font-spider works like this: The Chinese font file is very large, because English is only 26 letters, and Chinese characters have a lot of many, so the file is relatively large. Font-spider is starting with the @font-face of your CSS file, looking for fonts, and then traversing your HTML files, from CSS and HTML files you can find the text you actually use, remove the text, and then turn them into font files. Remove the vast majority of actually used text, the volume will shrink a lot.

After reading this thing is really great, and quickly try, because I use the gulp, directly with the corresponding building tools Gulp-font-spider How to use Gulp-font-spider

The first step is of course the installation: NPM install Gulp-font-spider--save-dev

Next in Gulpfile.js, write the task:

Font task, copying fonts from app to Dist
gulp.task (' Font ', function () {return
    gulp.src ("app/fonts/**/*")
        . PIPE (Plumber ())        
        . Pipe (Gulp.dest ("dist/static/fonts")).
        Pipe (Browsersync.stream ());
Fontspider task, compresses the font file in dist and replaces it. When you succeed, you will find that the font files in dist/fonts are much smaller than those in app/fonts
gulp.task (' Fontspider ', function () {return
    gulp.src (' dist/*.html ').  //Just tell it the folder where the HTML file is located, it is very convenient
        . Pipe (Fontspider ())
;

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

These two tasks are simple: the font task is to copy the fonts files in the Development folder app to the compiled folder Dist. The Fontspider task is to change the font file in the Dist folder into a compressed file.

Obviously, due to the relationship between these two tasks and the working principle of font-spider, when we write the default task, we must remember to make sure that the Html,sass/css,font related tasks are performed, and then perform the Fontspider tasks. Or it's going to go wrong.

Finally, take a look at the success of the implementation:

Then happily confirm the effect:

31/3951≈0.7846% font file narrowed down to the original 0.7846%, small is not a little bit, great clatter ...

Truncated from: http://blog.csdn.net/Creabine/article/details/55099602