使用COLRv1和CSS字体调色板使网络字体设计变得多姿多彩的教程

根据《街机游戏字体设计》一书的作者Toshi Omagari的说法，世界上第一个多色数字字体是在1982年为一个从未发行的视频游戏Insector创建的。尽管COLR字体格式自2018年起就有了全面的跨浏览器支持（甚至在IE浏览器中！），但多色字体，有时也被称为色差字体，在网络上仍然比较罕见。

这项技术开辟了一个全新的字体创意脉络。虽然我见过的一些彩色字体很浮夸，但充其量，彩色字体是有趣、创新和引人注意的。随着新的CSS功能的增加--包括font-palette 属性和@font-palette-values 规则--用于控制彩色字体的调色板，以及COLR字体格式的演变，现在是潜入和尝试现代网络排版的好时机。

COLR支持

我上次写彩色字体是在2018年。当时，有四种不同的多色字体标准。OpenType-SVG，COLR，SBIX，和CBDT/CBLC。你可以使用ChromaCheck来看看你自己的浏览器支持哪些彩色字体格式。

谷歌浏览器已经将OpenType-SVG标记为 "wontfix"，这意味着Chrome或Edge将永远不支持这种格式。SBIX和CBDT/CBLC在网络上的使用大多可以忽略，因为它们都是基于光栅图像的，在较大的字体尺寸下会变得模糊不清。基于位图的字体的大文件尺寸也使它们成为网络上的不良选择。

Ulrike Rausch是LiebeHeide的创造者，这是一种位图颜色的字体，它非常巧妙地复制了圆珠笔的外观。"我最大的目标是尽可能真实地再现手写文本，"她告诉我。"对于LiebeHeide，我终于能够用一种字体来模拟这些手工制作的属性。缺点是什么？字体文件中的所有PNG图像都会增加，导致OTF文件的大小很大。这对于桌面应用程序（如Adobe InDesign）来说可能不是问题，但对于在网络上使用的字体来说，几乎不适用"。

所有的浏览器都支持COLR字体（现在一般被称为COLRv0）。2月份发布的98版Chrome浏览器（和Edge）增加了对COLRv1的支持，这是该格式的一个演变。

这个浏览器支持数据来自Caniuse，它有更多细节。数字表示该浏览器在该版本及以上支持该功能。

桌面浏览器

浏览器	火狐	IE	边缘浏览器	浏览器
71	32	9	12	11

手机/平板电脑

安卓浏览器	安卓火狐	浏览器	iOS Safari
101	100	101	11.0-11.2

COLRv0 和 COLRv1

来自Underware铸造厂的Plakato

COLRv1是OpenType 1.9标准的一部分。最初的COLRv0缺乏OpenType-SVG的许多创造性的可能性，而COLRv1与这些可能性相匹配，同时避免了某些缺点。例如，COLRv0只能做纯色，而COLRv1可以做线性、径向 和锥形梯度。该格式还增加了合成和混合功能，并允许形状重用以节省文件大小。

文字设计专家Roel Nieskins解释说。"我曾经说过OpenType-SVG格式是最好的格式，因为它提供了最多的通用性--直到我意识到这对于文本渲染这样的低级工作来说实在是太复杂了。它在字体渲染层面上实现了SVG的一个基本子集。但是它不能很好地与其他字体技术（提示、可变轴等）配合，而且实现起来也很麻烦。所以，我改用了COLR。COLR基本上重新使用了OpenType字体已经拥有的一切。它'只是'增加了分层，以及改变每个层的颜色的可能性。简单，但有效"。

COLRv1与可变字体轴完全兼容，而且已经有了可变COLR字体的例子，如Merit Badge、Plakato Color和Rocher Color。

这里有一个来自Ulrike Rausch的引人注目的例子，说明这种格式的可能性，这是一种（目前尚未发布的）字体，它以数字方式再现了霓虹灯的外观。

字体铸造厂Underware的Akiem Helmling对COLRv1非常着迷，他告诉我，"COLRv1格式有可能对字体设计产生类似（甚至更大）的影响，而不是近年来的可变字体。" 对于Akiem来说，这无疑是一种优越的格式。"所有以前的颜色格式都是糟糕的黑客，为字形添加颜色。虽然OpenType-SVG被一些人认为是一个很好的解决方案，但从我的角度来看，它根本就不是。从实用的角度来看，SVG在OpenType的开放结构中是一个 "上锁的房间"。我们没有办法重新使用或链接数据，也没有办法在其他字体表和SVG表之间建立联系。正因为如此，我们无法用可变的SVG数据制作可变的字体。"

对于这种格式来说，现在还处于早期阶段。Mozilla还没有出货COLRv1，但是已经对该格式采取了积极的立场，表示它 "有可能在网络使用中取代OpenType-SVG字体"。苹果公司不愿意在Safari浏览器中实施它。

COLRv1字体在这些浏览器中仍然可以显示和阅读，但所有字母都将是单一的纯色（你可以用CSScolor 属性来设置，就像普通字体一样）。我们还没有看到许多字体制造商发布COLRv1字体，一些流行的设计工具如Figma甚至不支持COLRv0，但我充满希望，相信这将是网络上彩色字体设计的未来。在COLRv1出现的短短时间里，已经有一些漂亮的例子说明了这项技术可以做什么，比如Reem Kufi和Bradley Initials。

COLR和CSS

如果你正在使用一种彩色字体，你可能希望能够控制它的颜色。到目前为止，这在CSS中是不可能实现的。这个 font-palette属性带来了覆盖字体的默认色彩方案并应用你自己的色彩方案的能力。这个属性适用于COLRv0和COLRv1字体。(苹果公司的Myles Maxfield解释说，SVG字体可以选择使用调色板，而COLR字体的所有颜色都被CSS自动覆盖了）。

想出一个像样的调色板是一门艺术。一些字体设计师已经为我们做了艰苦的工作，并在字体中加入了备选调色板。你可以在这些不同的颜色方案中使用 base-palette在CSS中选择这些不同的颜色方案。

你怎样才能知道一种字体是否提供备用调色板呢？该字体的网站可能会告诉你。如果没有，有一个叫Wakamai Fondue的方便工具，可以列出所有可用的颜色方案（如下图所示）。在这个例子中，我将使用Rocher Color，这是一种来自Henrique Beier的免费可变颜色字体，有一种打火石的感觉。通过查看Wakamai Foundue，我们可以看到这种字体使用了四种颜色，并有十一种不同的调色板选项。

使用base-palette: 0 ，将选择默认的调色板（就Rocher而言，是深浅不一的橙色和棕色）。

使用base-palette: 1 ，将选择该字体的创建者所定义的第一个备选调色板，以此类推。在下面的代码例子中，我选择了一个不同灰度的调色板：

 @font-palette-values --Grays {
  font-family: Rocher;
  base-palette: 9;
}

一旦你用CSS选择了一个调色板 @font-palette-values规则选择了一个调色板，你就可以使用font-palette 属性来应用它：

.grays {
  font-family: 'Rocher';
  font-palette: --Grays;
}

当然，你可能想创建你自己的调色板，以匹配你的品牌颜色或满足你自己的设计感。如果你要覆盖所有的颜色，那么你就不需要指定base-palette 。

让我们以先锋字体设计师David Jonathan Ross的Bungee为例。它默认只使用两种颜色，红色和白色。在下面的例子中，我覆盖了字体的两种颜色，所以base-palette 并不重要，被省略了。

 @font-palette-values --PinkAndGray {
  font-family: bungee;
  override-colors:
    0 #c1cbed,
    1 #ff3a92;
}

@font-palette-values --GrayAndPink {
  font-family: bungee;
  override-colors:
    0 #ff3a92,
    1 #c1cbed;
}

另外，你可以把base-palette 作为一个起点，有选择地只改变一些颜色。下面我使用了Rocher的灰色调色板，但用薄荷绿覆盖了一种颜色。

@font-palette-values --GraysRemix {
  font-family: Rocher;
  base-palette: 9;
  override-colors: 
    2 rgb(90,290,210);
}

body {
  font-family: "Rocher";
  font-palette: --GraysRemix;
}

在指定override-colors ，你很难知道字体的哪一点会被哪一个数字所覆盖--你必须玩耍和实验，通过试验和错误来达到所需的效果。

如果你愿意，你甚至可以改变表情符号字体的颜色，比如Twemoji（如下图）或Noto。这里有一个来自谷歌的字体工程师的有趣演示。

目前的限制

一个令人遗憾的限制，至少目前是，CSS自定义属性不能在@font-palette-values 。这意味着下面的内容是无效的。

@font-palette-values --PinkAndBlue {
  font-family: bungee;
  override-colors:
    0 var(--pink),
    1 var(--blue);
}

另一个限制：从一个font-palette 到另一个的动画和过渡不能插值--这意味着你可以从一个调色板瞬间切换到另一个，但不能在它们之间逐渐产生动画。我想做一个生动的动画表情符号字体的梦想很遗憾地没有实现。

浏览器支持

font-palette 和 ，从15.4版本开始在Safari浏览器中得到支持，并随着101版本的发布在@font-palette-values Chrome和Edge中登陆。

这个浏览器支持数据来自Caniuse，它有更多细节。一个数字表示该浏览器在该版本及以上支持该功能。

桌面浏览器

浏览器	火狐	IE	边缘浏览器	浏览器
101	没有	没有	没有	15.4

手机/平板电脑

安卓浏览器	安卓火狐	安卓	iOS Safari
101	没有	101	15.4

使用案例

你可能已经可以想象到你如何在自己的项目中使用彩色字体。不过，有几个具体的使用情况值得一提。

COLR和图标字体

图标字体可能不再是网络上最流行的显示图标的方法（克里斯解释了原因），但它们仍然被广泛使用。如果你使用具有多种颜色的图标字体，如FontAwesome的Duotone或Material Design的双色图标，font-palette ，可以提供一种更容易的定制方法。

解决表情符号问题

Nolan Lawson最近写了关于在网络上使用表情符号的问题。Chrome开发者博客解释了一个相当复杂的当前解决方案。

如果你支持用户生成的内容，你的用户可能会使用emojis。今天，扫描文本并将遇到的任何表情符号替换为图像是非常普遍的，以确保跨平台渲染的一致性，并能够支持比操作系统支持的更新的表情符号。然后在剪贴板操作过程中，这些图像必须被切换回文本。

如果得到更大的浏览器支持，COLRv1表情符号字体将提供一个更简单的方法。COLRv1还有一个好处是在任何尺寸下都看起来很清晰，而原生浏览器的表情符号在较大的字体尺寸下会变得模糊和像素化。

总结

在彩色字体之前，网络上的排版创意只限于用CSS来应用笔画或渐变填充。你总是可以用矢量图像做一些更个性化的东西，但那不是真正的文本--它不能被用户选中并复制到剪贴板上，不能用Command+F在页面上搜索，不能被屏幕阅读器或搜索引擎读取，而且你需要打开Adobe Illustrator来编辑副本。

彩色字体有可能真正抓住用户的注意力，使它们成为登陆页面和横幅的完美选择。它们可能不是你经常使用的东西，但它们为网页设计提供了新的表现力和创造性的可能性，可以使你的网站脱颖而出。