前端使用自定义字体方案

工作中我相信大家都遇到过设计要求使用一些奇奇怪怪字体的需求，然后因为字体文件太大，选择切图。

我这个需求就厉害了，用户发的文章可以选择字体。这文章中可以出现的字就太多了，显然上个方案就不合适了，那我们是这么做的呢？

废话不多说，先上 demo，别问我 demo 是谁。

• 接口地址：https://www.lilnong.top/createfont?txt=%E6%B5%8B%E8%AF%95%E6%96%87%E5%AD%97
• 页面地址： https://www.lilnong.top/static/html/createfont.html

实现方案

分析一下问题

问题只有一个，那就是：字体文件太大了（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
   也可以做字体子集化，还可以修改每个字的字形（可以理解为混淆）。

微信公众号：前端linong