Font file optimization practices

preface

In this project, UI sister required to use other fonts such as square, so we introduced these fonts. When packaging, WE found that OMG, a font file was 10M, which was unbearable, so we started to optimize the font file size, and finally it became 38KB, which was ok.

solution

  • The principle of font spider is to find the font style by crawling HTML files and associated CSS, then crawling the relevant characters, sorting to remove the weight, and finally only for these characters retain the corresponding characters of the font file, so as to achieve the purpose of greatly reducing the size of the file. Disadvantages: It is easy to know from its principle that its fatal defect is that it may not be able to retain the font file of the characters dynamically added by THE JS script, and it is not friendly enough for the dynamic deletion and increase of a large number of characters in the page. If this is the case, it is suggested to find another solution. Packaging: There are solutions for gulp and grunt related plug-ins, as well as console input commands to generate compressed font files
  • FontMin is almost identical to the spider in that it has everything it has, but it’s worth noting that FontMin also has an application file version that allows you to compress font files by dragging them and manually entering possible characters.

font-spider

gulp-font-spider

Possible pit!!

  • Of course, if you are using gulp, you will need to install Node first and get the general information about gulp. !
  • Python is required. Python 2.7 is recommended
  • Make sure the file path is correct and exists when you run fontSpider
  • If the compressed font file appears, but the size does not change or change significantly, it is probably the source font file problem!! I tried all these methods, but the results were all the same. I went to their GitHub to read the issue and found inspiration. When I changed another font, it worked.

The installation

npm install gulp-font-spider --save-dev
Copy the code
  • Make sure the installation is successful and NPM install anything missing

CSS

@charset "utf-8 "; @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'), // /.. /assets/font/pinghei.svg') format('svg'); font-weight: normal; font-style: normal; } body { font-family: pinghei; // Use the font}Copy the code

gulpfile.js

/** * this is the gulp4.0 configuration file */
var gulp = require('gulp'),
    fontSpider = require( 'gulp-font-spider'); // Font file optimization -- Word spider

/** * fontSpider */
gulp.task('fontSpider', done => {
    gulp
	.src(buildPath.html) // Import the corresponding HTML file
        .pipe(fontSpider({
            backup: false // The source font is not backed up
        }))
        .pipe(notify({
            message: "font compress done" // Notification upon completion
        }))
        done(); // Finish the task
});

/** * gulp default command */
// In the development stage, there is no need to press or compress the font, so in the development stage, I just copy the source font to the past

/** * gulp build * I will execute the fontSpider task at the end, because this ensures that the packed HTML and CSS files are already present, * it is more efficient to filter the font file compression for the HTML files in the compiled DIST */
gulp.task('build', 
    gulp.series('clean'.'styles'.'html'.// Run in serial
        gulp.parallel('js'.'vendor'.'copyAssets'),  // Run parallel
    'fontSpider') // Last run
);
Copy the code

Screenshots show

gulp build

(if backup is enabled, the source font file is in. Font -spider.)

font-spider

Possible pit!!

  • Please take a look at the above
  • npm install -g node-gyp

The installation

npm install font-spider -g
Copy the code
  • Font -spider -V Check whether the installation is successful

run

font-spider ./*.html --debug
Copy the code
  • CD to the project directory, and then enter the corresponding HTML file -debug to view the log when an error is reported
  • The result is consistent with the screenshot above

FontMin

Application Version Installation

Github.com/ecomfe/font…

screenshots