中文字体 webfont 自动化构建

最新推荐文章于 2020-08-20 11:24:37 发布

show_code

最新推荐文章于 2020-08-20 11:24:37 发布

阅读量1k

点赞数

分类专栏： Web前端文章标签： web字体自动化构建

Web前端专栏收录该内容

74 篇文章 3 订阅

订阅专栏

关于字体，长久以来，前端工程师们进行了各种探索：图片，siFR，Cufon，@font-face …

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

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

以上，我们的解决方案就是：基于 edp 和 fontmin，按需提取字型，多格式转换，自动化构建字体。

首先，你要有个 `edp`

$ npm install -g edp

示例

$ 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                                                  # 开始构建

配置

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