序言

直到最近，在矢量字体的字形中使用多种颜色在技术上是不可能的。要获得多色字母，需要为每种颜色复制内容。就像许多其他技术一样，数字字体需要一段时间才能克服旧技术的限制。当使用木刻或铅字印刷时，每字形只有一种颜色的限制是固有的（除非您计算随机的渐变）。每字形多种颜色需要不同的字体来处理不同的彩色部分，并且每次颜色都需要重新印刷。这已经完美地实现了，一些壮丽的例子图片可以在网上找到。使用叠印，可以仅用两种颜色实现三种颜色的效果。

数字字体格式保留了每字形只有一个“表面”的限制。字形中可以有多个轮廓，但是当字体用于排版时，指定的颜色将应用于所有轮廓。类似于凸版印刷，内容需要加倍并叠加才能在每个字形中拥有多种颜色。复制听起来并不是一个优雅的解决方案，而且它是一个持续的错误来源。

直到出现一些表情符号，对多色字体的需求才足够大，足以开发额外的表格来将这些信息存储在 OpenType 字体中。截至目前，有几种不同的方法来实现这一点。Adam Twardoch 在 FontLab 博客上详细比较了所有提议的解决方案。

对我来说，Adobe/Mozilla 的方式看起来最吸引人。

在提出该方案后，它被 W3C 社区小组 讨论并发布为 稳定文档。基本思想是在 OpenType 字体中将彩色字形存储为 SVG。当然，这取决于字体的复杂程度，但 SVG 通常比 PNG 产生更小的文件大小。随着高分辨率屏幕的发展，矢量似乎也比像素更好的解决方案。对 SVG 进行动画处理的可能性是一个有趣的补充，并且肯定会在有趣（和非常烦人）的方式中使用。闪闪发光。

技术

我不是字体技术人员或 Web 开发人员，我只是对这些新发展非常好奇。可能还有其他方法，但这是我成功构建彩色 OpenType 字体的方法。

要制作自己的字体，您需要一个字体编辑器。有几种选择，例如 RoboFont 和 Glyphs（仅限 Mac），FontLab 以及免费的 FontForge。RoboFont 是我选择的编辑器，因为它高度可定制，您可以使用 Python 构建自己的扩展。在一个新字体中，我添加了与最终字体中需要的颜色数量一样多的新图层。您可以立即在不同的图层中绘制，也可以在将轮廓绘制到前景图层后，将它们复制到相应的图层中。使用非常方便的 图层预览 扩展，您可以预览所有重叠的图层。您也可以只增加字体窗口中缩略图的大小。在某个时候，它们将显示所有图层。在检查器中根据您的喜好调整颜色，因为它们用于预览。

绘制完轮廓后，您需要为每个图层/颜色保存一个 ufo。我使用了一个小 Python 脚本来将它们保存在与主文件相同的位置。

f = CurrentFont()
path = f.path

for layer in f.layerOrder:
newFont = RFont()

for g in f:
    orig = g.getLayer(layer)
    newFont.newGlyph(g.name)
    newFont[g.name].appendGlyph(orig)
    newFont[g.name].width = orig.width
    newFont[g.name].update()

newFont.info.familyName = f.info.familyName
newFont.info.styleName = layer
newFont.save(destDir = path[:-4] +"_%s" % layer +".ufo")
newFont.close()

print "Done Splitting"

一旦我拥有了所有单独的 ufo，我就将它们加载到 TransType（来自 FontLab）中。只需将您的 ufo 拖放到主窗口中，然后选择您要合并的 ufo。在“效果”菜单中单击“叠加字体…”。您将获得一个预览窗口，您可以在其中为每个 ufo 分配一个 rgba 值，然后单击确定。选择集合中的新添加的字体，并将其导出为 OpenType (ttf)。您将获得一个包含所有 colorfont 版本的文件夹。

RoboChrome

如果您不想使用 TransType，您可能需要看看 Jens Kutílek 的名为 RoboChrome 的功能强大的 RoboFont 扩展。您将需要为每种颜色准备一个单独的基础字形版本，如果您将所有轮廓都放在图层中，也可以使用脚本完成此操作。

f = CurrentFont()
selection = f.selection

for l, layer in enumerate(f.layerOrder):
for g in selection:
    char = f[g]
    name = g + ".layer%d" % l
    f.newGlyph(name)
    f[name].width = f[g].width
    l_glyph = f[g].getLayer(layer)
    f[name].appendGlyph(l_glyph)
    f[name].mark = (.2, .2, .2, .2)

print "Done with the Devision"

Fonttools

您还可以修改已编译字体的 svg 表格，或者如果它还没有，则插入自己的表格。为此，我使用了 Just van Rossum 的非常有用的 fonttools。只需使用您选择的字体编辑器生成一个 otf 或 ttf。打开终端，如果使用 Mac OS 并且安装了 fonttools，请键入 ttx。将字体文件拖放到终端窗口中，然后按回车键。Fonttools 将将您的字体转换为相同文件夹中的 xml (YourFontName.ttx)。然后可以打开、修改和重新编译此文件以生成 otf 或 ttf。

这对于简化程序编译的 svg 并因此减小文件大小非常有用。我重写了一个 1.6mb 字体的 svg，使其降至 980kb。将其用作 web 字体，这会产生很大的差异。如果您要添加自己的 svg 表格和还没有任何表格的字体，您可能需要阅读一些有关所需标题信息的知识。要为要提供 svg 数据的字形提供 endGlyphID 和 startGlyphID，可以在 <GlyphOrder> 表格中找到。

<svg>
<svgDoc endGlyphID="18" startGlyphID="18">
    <![CDATA[
    <!-- here goes your svg -->
    ]]>
</svgDoc>
<svgDoc endGlyphID="19" startGlyphID="19">...</svgDoc>
<svgDoc endGlyphID="20" startGlyphID="20">...</svgDoc>
...
<colorPalettes></colorPalettes>
</svg>

需要注意的一点是两种不同的坐标系。与数字字体相反，svg 具有 y 向下的轴。因此，您要么必须在负空间中绘制，要么反向绘制，然后使用以下命令镜像所有内容

transform="scale(1,-1)"

动画

现在，如果您真的想炫耀您的字体，您应该添加一些不必要的动画来惹恼每个人。只需将其插入您想要修改的任何内容的开始和结束标签之间。这是一个示例，它显示了一个圆圈在 500 毫秒内循环地从 0% 到 100% 更改其填充不透明度的示例。

<circle>
<animate    attributeName="fill-opacity"
            begin="0"
            dur="500ms"
            from="0"
            to="1"
            repeatCount="indefinite"/>
</circle>

实施

从技术上讲，这些字体应该可以在任何使用 otf 或 ttf 的应用程序中使用。但是，截至目前，只有 Firefox 显示了 svg。如果渲染不受支持，应用程序将只使用常规字形轮廓作为后备。因此，如果您已经准备好了您的字体，那么该编写一些 css 和 html 来在网站上测试和显示它们了。

@font-face

@font-face {
font-family: "Colors-Yes"; /* reference name */
src: url('./fonts/Name_of_your_font.ttf');
font-weight: 400; /* or whatever applies */
font-style: normal; /* or whatever applies */
text-rendering: optimizeLegibility; /* maybe */
}

基本 css

.color_font { font-family: "Colors-Yes"; }

HTML

<p class="color_font">Shiny polychromatic text</p>

限制

截至目前（2014 年 10 月），该格式仅受 Firefox (26+) 支持。由于这是由 Adobe 和 Mozilla 发起的，因此将来可能会有更广泛的支持。

虽然使用 svg 具有文件大小合理的优点，并且不需要复制内容，但它也带来一个主要缺点。由于颜色是“硬编码”到字体中的，因此无法使用 css 访问它们。希望这可能会随着 <COLR/CPAL> 表格的实现而改变。

有一个 错误，它阻止 Firefox 32 中播放动画。虽然动画在当前版本 (33) 中呈现，但这可能会由于明显的原因而改变。

根据您建立 svg 表格的方式，它可能会爆炸并导致相当大的文件。如果您使用它们来渲染网站上最关键的内容，请注意这一点。

示例

• 雕刻字体
• 国际海事信号旗 ICS 的旗帜字母表
• 闪耀运动 注意！一个 980kb 的沉重字体，包含大量动画。
• 气泡出错了 不要在您的 grep 中混淆 $1 和 $2。

链接、版权和感谢

• 在 w3.org 上的 OpenType 中 svg 字形的规范
• Tal Leming、Just van Rossum 和 Erik van Blokland 的 ufo 格式
• Robofont 由 Frederik Berlaen 开发
• Frederik Berlaen 为 Robofont 开发的 图层预览
• Jens Kutílek 为 Robofont 开发的 RoboChrome
• FontLab 的 TransType
• Just van Rossum 的 fonttools 和 github 上的分支
• archive.org 上的 多色字体样本
• 来自 mozilla 的动画样本
• 代码高亮使用 prism 实现。
• Symbolset 有类似的 教程

感谢 Erik、Frederik、Just 和 Tal 制作了很棒的工具！