CSS 字体新玩法之彩色字体的实现

如果你们设计师想在某些特别的专题活动中使用下图的字体作为标题字体进行展现，怎么办呢？做成图片咯。然后你可能会遇到这几个问题：不同屏幕下的适配，要是只做一种尺寸的图，放大或缩小后的效果都不太好。直接做成 SVG？好像不能复制到 Word 里面加粗啊，也就是说，这种做法使得这些“文字”本身失去了真实文字该有的能力。

此时彩色字体的好处就显现出来了。既能达到视觉效果上的要求，还拥有常规文字的功能，能够复制，能够粘贴，还可以被屏幕阅读器阅读，丝毫不妨碍常规操作。

Playbox by Matt Lyon

什么是彩色字体（Color Font）

初识彩色字体

在我们所熟知的传统字体中，字体文件本身仅仅描述了字体的外形特征，这些特征一般包含着矢量的轮廓数据或是单色调位图数据。在浏览器渲染单色字体时，渲染引擎使用设定的字体颜色填充字形区域，最后绘制出对应文字及其设定的颜色。而彩色字体中，不仅仅存储了字体的外形特征，还保存了颜色信息，甚至还能在字体中提供不同的配色，增加了灵活性的同时也更具丰富的外形细节。

日常使用中最常见的彩色字体要数 Emoji 表情了。例如在 Windows 10 上，Segoe UI Emoji 就属于一款彩色字体。

通常彩色字体还会包含一些兼容信息，这些兼容信息包含 Unicode 编码的单色字形数据，使得在一些不支持彩色字体的平台上，仍然能够像渲染普通字体一样将彩色字体的字形渲染出来，达到一种向后兼容的效果。

彩色字体的实现标准

在彩色字体设计的发展历史上，由于各家有自己的实现方案，导致在 OpenType 字体中嵌入的色彩信息标准也不尽相同。在最新的OpenType 标准中  ，就有多达四种彩色字体数据的描述格式。

SVG，由 Adobe 和 Mozilla 主导的矢量字体标准。其中不仅包含了标准的 TrueType 或 CFF 字形信息，还包含了可选的 SVG 数据，允许为字体定义颜色、渐变甚至是动画效果。SVG 标准中的配色信息也将存储在 CPAL 中。 COLR + CPAL，由微软主导的矢量字体标准。其中包含 COLR 即 字形图层数据 和 CPAL 配色信息表 ，对其的支持集成在 Windows 8.1 及之后的版本中。 CBDT + CBLC，由 Google 主导的位图字体标准。其中包含了 CBDT 彩色外形位图数据 和 CBLC 位图定位数据 ，对其的支持集成在 Android 中。 SBIX，由 Apple 主导的位图字体标准。SBIX 即 标准位图图像表 其中包含了 PNG、JPEG 或 TIFF 的图片信息，对其的支持集成在 macOS 和 iOS 中。