彩色字体生成小记

Posted on 2018-04-18(星期三) 19:15 in Data

之前研究过字体文件(主要是ttf)的脚本化生成流程,一般字体脚本化生成流程可参考 【字体生成小记】。最近在手机市场上出现了几种彩色字体,下载量都超级高(但外强中干),所以研究花了三天时间研究了下彩色字体。 刚开始想当然的以为将svg矢量字体文件加上渐变颜色就搞定了,最后在打包ttf文件的过程中发现,加的颜色完全被忽略掉了。这时候意识到,这两种字体结构可能不一样,于是爬下来几种彩色字体:

  • Aa彩虹棉花糖体
  • Aa梦里花
  • 喜大普奔
  • NotoColorEmoji

做研究。我现在常用的字体编辑工具是FontCreator, 但在打开这几个文件时同时都会报错:

看报错情况,这种字体文件缺少了轮廓信息,那字体没有轮廓信息,又会用什么信息来代替轮廓呢?带着这个问题,我分析了普通字体和彩色字体文件的表结构的区别:

(彩色TTF)

(一般TTF)

从上面图可以看出来,一般字体是用glyf配置表来描述一个字形结构的,而手机上的这几款彩色字体用的是另外两个配置表去描述的,此时可以猜测一下,描述这个字体的就是对应的彩色图片数据。所以,原来通过fontforge添加glyf的方式并不适用于这一类型的彩色字体(彩色字体也有矢量的,如 svg in OpenType,简称 svgInOT), 彩色字体更多的信息可参考 colorfonts

简单的摘录一下彩色字体现有四种分类和各自支持的平台:

结合分析出来的配置表结构和上图,最终把问题定位到 如何去生成CBDT这个配置表文件。在双G索引模式(google AND github),找到一个google的 noto-emoji 项目,一看有九百多个star,心里顿时充满了希望。心想,emoji表情也是unicode,能添加表情到字体文件中,那也可以添加别的字,下载github上的成品字体文件——NotoColorEmoji.ttf 到本地,用fontcreator打开之后和之前的错误一样,所以,这个项目很靠谱。

从头到尾搜索了一遍,发现在 noto-emoji/third_party/color_emoji/ 目录下有个emoji_builder.py,在这个文件中包含了CBDT和CBLC的结构信息和操作方法,bingo,这就是我所要的。简单说明一下,使用该脚本需要提供一个包含需要的字符集的普通ttf文件,还有对应字符集的所有png文件(放到一个文件夹中,且必须是透明文件,要不生成的字后面有背景色),如此这般,前期准备就算完了。

执行脚本,传入三个参数,第一个为模板字体文件, 第二个为目标文件,第三个为png文件目录

 python emoji_builder.py source.ttf target.ttf /ceph/tian/fonts-project/colorfont/png60/

在执行的过程中,脚本会调用 Fonttools 中的工具读取ttf文件,然后向其中写入CBDT和CBLC信息,其中的png编码任务由脚本同级目录的png.py完成,补充完CBDT信息,再次调用 Fonttools 生成新的ttf文件, 大功告成。

在生成的过程中遇到的问题:

  • 脚本要根据png的文件名称找unicode码,如果不包含的话,自己修改代码去获取unicode码;
  • 在高版本的android手机中字体文件可以识别(5.0),但在4.0的系统中不能识别。对比文章开头的几个彩色字体的ttx文件(Fonttools工具生成,可在ttf和ttx中方便的转换), 发现在CBDT配置表中,版本是3,而对比字体是2,另外在 cbdt_bitmap_format版本中,我的是18,对比字体是17,所以,问题应该就出在版本太高了(注:我使用是是master分支的脚本),打开历史tag往前捯,发现2017-12月分支的版本是17,如图:

    于是down下来代码再次测试,成功在android 4.0上显示彩色字体。 - 生成的字体文件过大。 之前是svg文件,画板大小设置的是256X256, 测试的时候缩成128X128的png文件, 最后生成的GB2312的6763字符集的字体文件大小为70M,在此,这和两个方面有关系,一是用ImageMagic将svg转png时默认单通道为16位,那生成的png则为64位,二是128x128相对在手机上显示的字体来说,还是有点大,参考文章开始的几个彩色字体做法,也缩成了60x60。最终字体大小在10M左右。

更换字体测试方法

  • 华为

在根目录下有 HWThemes 文件夹, 里面有华为对应的主题,以 .hwt 结尾, 下载一个带fonts子目录的主题文件,替换其中的字体文件(注意要保持字体文件名称一致,hwt文件用压缩软件打开),把hwt文件放到HWThemes下,从华为的主题 App进入找到 “我的”标签页,选择对应的主题点应用即可预览。

  • vivo

在根目录下有 font 文件夹,里面的字体文件后缀为itz,是打包后加密生成的(工具:FontPack1.0.0.5_1)

vivo字体标准目录结构:

fonts下放入刚打好的ttf文件,preview为预览图片,测试的话随意,然后使用 FontPack 打包即可。

参考

[noto-emoji]