Front-end custom font scheme

I think we all work met the requirements to use some strange font design requirements, and because the font file is too large , select the cut map.

I would much this demand, the user can choose to send the article font . This word article may appear too much, apparently the last program is inappropriate, then we are doing it?

Ado, the first demo.

Implementation

Analyze problems

Only one problem, and that is the font file is too big (10MB) . I will not speak flow is not expensive, so big files spam , I have read your article font has not come back.

solution

Of course, the font file is reduced, then there are two options

Provide common word generator font files

English words is relatively simple, such as only 26 letters.

But the profound Chinese characters, too hard, then we can provide some commonly used words .

advantage:

1. Only one resource can be cached public.
2. Simple

Disadvantages:

1. Because it is a common word, so there may be some common words will not show the default font, a bad experience.
2. Because font files are large, so the first time it loads a little slower. But it is because it is not the full amount will be a little faster.

Dynamically generated font file

The plan is to put forward all the words in the article, and then generate a font file to use.
In fact, this program commonly used in static pages, run a script analysis generates a font file.

advantage:

1. Small files, fast
2. Achieve a little more complicated, because of the need to dynamically generate the font file, the server needs to engage in a font generation services.

Disadvantages:

1. Every article must be modified to generate a new font file, the old resource utilization is not high, the cache utilization rate is not high.

Of course, we finally chose this dynamically generated font file program, on a small file to load faster .

fontmin library

Well above the said scheme, the following began to say how to engage.

I am using a fontmin libraries to implement functions.

installation

 

npm install --save fontmin

use

 

var Fontmin = require('fontmin');

new Fontmin()
    .src('/static/font/font.ttf') // 载入字体
    .use(rename(txtMD5+'.ttf')) // 修改输出的文件名
    .use(Fontmin.glyph({text: txt,hinting: false})) //子集化 text 参数就是输出时要的字体
    .use(Fontmin.ttf2eot())     // eot 转换插件
    .use(Fontmin.ttf2woff())    // woff 转换插件     
    .use(Fontmin.ttf2svg())     // svg 转换插件
    .use(Fontmin.css())         // css 生成插件
    .dest('/static/fontmin'); // 设置字体输出路径
    .run(function (err, files) {
        if (err) throw err;
        console.log('success');
    });

Modify the file name generated

 

var rename = require('gulp-rename');

.use(rename(txtMD5+'.ttf')) // 修改输出的文件名

Modify css file font font-family

 

.use(Fontmin.css(
    fontFamily: 'MD5'
))

Other Resources

1. font-spider
   can automatically analyze html file that can be placed gulp in use.
2. font-carrier
   can do subsetting fonts, you can also modify the shape of each word (it can be understood as confusing).