中文字体 webfont 自动化构建

关于字体,长久以来,前端工程师们 进行了各种探索:图片siFRCufon@font-face

@font-face 似乎是个不错的方案,Adobe TypeKit , Google Fonts 都在使用这个方案。但是,中文字体 因为字符集巨大,浏览器、操作系统国情 等原因,发展受到了很大限制。所以,时至今日,大多数网站的中文字体还是上图片。图片字体的悲伤:SEO 不友好,不具备的可编辑性,不支持 Accessibility 原则 … 差评!

随着 PC 的更新换代,操作系统的升级,移动设备的崛起,@font-face 兼容性已经不足为患。ttf, svg, eot, woff 总有一款适合您。那么剩下的主要问题就是中文字符集过大了。

以上,我们的解决方案就是:基于 edpfontmin,按需提取字型,多格式转换,自动化构建字体。

首先,你要有个 edp

1
$ npm install -g edp

示例

1
2
3
4
$ git clone https://github.com/junmer/edp-build-fontmin-demo # 下载 示例项目
$ cd edp-build-fontmin-demo # 进入 示例项目 路径
$ npm install edp-build-fontmin # 安装 edp-build-fontmin 依赖
$ edp build -f # 开始构建

配置

1
2
3
4
5
6
7
var FontProcessor = require('edp-build-fontmin');
var fontProcessor = new FontProcessor({
files: [ '*.ttf' ], // 字体文件
entryFiles: [ '*.html' ], // 引用字体的网页,用来扫描所需字型
text: '他夏了夏天', // 人肉配置所需字型
chineseOnly: true, // 只取中文字型,忽略 数字、英文、标点
});

效果

1
$ edp ws start

打开 http://127.0.0.1:8848/http://127.0.0.1:8848/output/ 对比效果

构建前:

构建后:

字体文件 5.1 MB -> 29.1 KB, 效果 萌萌哒 ( ̄y▽ ̄)~*

相关项目

致敬

知识共享许可协议