1. 90前端首页
  2. 前端开发
  3. JavaScript

前端使用自定义字体方案

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

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

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

实现方案

分析一下问题

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

本文来自网络整理,转载请注明原出处:https://segmentfault.com/a/1190000022021264

展开阅读全文

发表评论

登录后才能评论