原文出处： 淘宝前端团队（FED）- 龙驭
以 ttf 文件为例，字体文件中主要包含了字体头表，位置索引表和图元数据表等等，其中最核心的部分就是图元数据表，也就是字形描述表，它可以包含可变数目的图元，每个图元可以有不同数目的控制点，甚至还可以有数量可变的图元指令，通过位置索引表对应到每个字符上，通过图元数据表，使其只包含需要使用的字符的图元描述。即可最小化字体，使其可用于生产环境的页面中，其他类型的字体文件（如 woff， eot， svg 等）原理也是大同小异，仅仅是压缩方式和字形描述规范不同，也可以互相转化。
font-carrier 模块基本原理font-carrier 模块使用 OpenType 模块分析 ttf 文件，可以文件的内容脚本化，使其成为一个字符 unicode 编码和其字形描述的键值对象。通过对这个对象的 min 方法，可以使其最小化，并且再逆向生成文件 Buffer 供用户使用。
一期实现流程 存在问题因为 font-carrier 模块生成的字体对象无法通过文件来持久化保存，只能生成后常驻内存中，而字体的数量多，大小也大，所以不管是生成的时间，生成时消耗的性能，生成后占用的内存都非常巨大。所以问题的关键在于如何把字体的分析结果持久化保存在服务器中。
解决方案在咨询了 font-carrier 模块的开发者后，了解到 font-carrier 模块还有生成字体的 svg 片段的方法，可以将字体的图元数据转变为 svg 输出，并可以将 svg 逆向导入到空字体文件中来生成最终字体文件。
通过将字体分析转译后的 svg 片段结果保存在数据库中，即可持久化分析结果。使用的时候通过创建空字体->配置字符-svg 的对应关系->提取字体->上传到 OSS 的流程来使用最小化后的字体即可。
JavaScript
1
2
3
4
5
6
7
8
9
10
11
var transFont = fontCarrier.transfer(__dirname + '/../../www/fonts/' + fontInfo.font_name + '.ttf');
var words = [];
_.each(transFont.__glyphs， function(n, word) {
words.push({
word: word,
fontId: fontInfo.id,
svg: transFont.getSvg(word, {
skipViewport: true
})
});
});
以下是一段方正喵呜体中的“我”字提取的 svg 片段
JavaScript
1
2
3
4
5
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
相关文章
精彩导读
热门资讯
关注我们
