前端使用自定义字体方案

实现方案

分析一下问题

问题只有一个，那就是：字体文件太大了（10MB）。先不说流量贵不贵，这么大个文件，垃圾网时，我文章都看完你字体还没回来。

解决方案

当然是把字体文件缩小，那么有两种方案

• 提供常用字生成字体文件

• 动态生成字体文件

提供常用字生成字体文件

英文的话比较简单，比如只提供 26 个字母。

但是中国汉字博大精深，太难了，那么我们可以提供一些常用字。

优点：

1. 只有一个资源，可以缓存公用。

2. 实现简单

缺点：

1. 因为是常用字，所以有可能一些不常用字就会显示默认字体，体验较差。

2. 因为字体文件较大，所以首次加载会慢一点。但是又因为不是全量，会快一点。

动态生成字体文件

这个方案就是把文章中的所有字提出来，然后生成一个字体文件使用。

其实这个方案常用于静态页面，跑个脚本分析生成一个字体文件。

优点：

1. 文件小，速度快

2. 实现稍微复杂，因为需要动态生成字体文件，需要服务端搞一个字体生成的服务。

缺点：

1. 每次修改文章都要生成新的字体文件，旧资源利用率不高，缓存利用率不高。

当然，我们最后选择了这个动态生成字体文件方案，就了文件小，加载快。

fontmin库

好了上面把方案说了，下面就开始说怎么搞了。

我使用的是 fontmin 库来实现的功能。

安装

npm install --save fontmin

使用

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

修改生成的文件名称

var rename = require('gulp-rename');
.use(rename(txtMD5+'.ttf')) // 修改输出的文件名

修改 CSS 文件中字体的 Font-family

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

其他资源

1. font-spider
   可以自动分析Html文件，可以放入 Gulp 中使用。

2. font-carrier
   也可以做字体子集化，还可以修改每个字的字形（可以理解为混淆）。