前端使用自定义字体方案

工做中我相信你们都遇到过设计要求使用一些奇奇怪怪字体的需求，而后由于字体文件太大，选择切图。

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

废话很少说，先上 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