COLRV1和CSS字体式板

根据Arcade Game排版的作者Toshi Omagari的说法，世界上第一个多色数字字体是为1982年创建的，用于从未发行的视频游戏Insector。即使Colr字体格式自2018年以来（即使在Internet Explorer！）以来，Colr字体格式在网络上都具有完整的跨浏览器支持，但在网络上仍然相对罕见，多色字体（有时称为色类型）。

该技术打开了全新的印刷创造力。虽然我见过的某些颜色字体充其量是Lurid，但色彩字体很有趣，创新且引人注目。通过添加了新的CSS功能（包括字体 - 彩板属性和 @font-palette-values规则），用于控制彩色字体的调色板以及Colr字体格式的演变，现在是潜入并尝试现代网络版本可以做的事情的绝佳时机。

Colr支持

我上次在2018年写了有关颜色字体的文章。当时，有四个不同的标准，用于多色字体：Opentype-SVG，Colr，Sbix和CBDT/CBLC。您可以使用Chrachacheck查看您自己的浏览器支持的颜色字体格式。

Google Chrome已将Opentype-SVG标记为“ Wontfix”，这意味着格式将永远不会受到Chrome或Edge的支持。 SBIX和CBDT/CBLC在网络上大部分都可以忽略，因为它们都基于栅格图像，并且在较大的字体大小上变得模糊。基于位图的字体的较大文件大小也使它们成为Web的不良选择。

Ulrike Rausch是LieBeheide的创建者，它是一种位图颜色字体，它不肯定地复制了圆珠笔的外观。她告诉我：“我最大的目标始终是尽可能真实地复制手写文本。” “对于LieBeheide，我终于能够用字体模拟这些手工属性。缺点？字体文件中的所有png映像加起来并导致巨大的OTF文件大小。对于桌面应用程序，例如Adobe Indesign，这可能不是问题，但是在网络上使用该字体几乎不适用。”

所有浏览器都支持COLR字体（现在通常称为COLRV0）。 2月发布的Chrome（和Edge）版本的98版增加了对格式发展的ColRV1的支持。

此浏览器支持数据来自Caniuse，其中有更多详细信息。一个数字表明浏览器在该版本及以上支持该功能。

桌面

移动 /平板电脑

COLRV0和COLRV1

COLRV1是Opentype 1.9标准的一部分。尽管最初的ColRV0缺乏Opentype-SVG的许多创造性可能性，但ColRV1匹配这些可能性，同时避免了某些缺点。例如，COLRV0只能做纯色，而ColRV1可以进行线性，径向和圆锥梯度。该格式还添加了合成和混合，并允许形状重复使用以节省文件大小。

排版专家Roel Nieskins解释说：“我曾经说过Opentype-SVG格式是最优秀的格式，因为它提供了最多功能性 - 直到我意识到这太复杂了，对于像文本渲染这样的低级工作。它在字体渲染级别上实现了SVG的基本子集。但是它与其他字体技术（暗示，可变轴等）的配合不佳，并且实施是一种痛苦。因此，我将侧面切换到Colr。 Colr基本上重新使用了Opentype字体已经拥有的所有内容。它“只”增加了分层，并且可能会更改每一层的颜色。简单但有效。”

COLRV1完全与可变字体轴兼容，并且已经有可变Colr字体（如功能徽章，Plakato Color和Rocher Color）的示例。

这是Ulrike Rausch的一个显着示例，即该格式的可能性，即（当前未发行的）字体，可以在数字上重新创建霓虹灯的外观：

Akiem掌舵的类型铸造厂被Colrv1迷上了colrv1，告诉我：“ colrv1格式可能会对类型设计产生与近年来可变字体相似的（甚至更大）的影响。”对于Akiem来说，无疑是上级格式。 “所有以前的彩色格式都是不良的骇客，可以为字形添加颜色。尽管某些人将Opentype-SVG视为一个很好的解决方案，但从我的角度来看，它根本不是。从务实的角度来看，SVG是Opentype开放结构中的“锁定房间”。无法重复使用或链接数据或在其他字体表和SVG表之间创建连接。因此，我们无法使用可变的SVG数据制作可变字体。”

格式仍然是初期。 Mozilla尚未将ColRV1发货，但在该格式上取得了积极的立场，并指出它具有“在Web使用中取代Opentype-SVG字体的潜力”。苹果不愿在野生动物园中实施它。

COLRV1字体仍将显示并在这些浏览器中可读，但所有字母的颜色都将是单个纯色（您可以使用CSS Color属性设置，就像使用普通字体一样）。我们尚未看到许多类型的铸造厂发布ColRV1字体，并且一些流行的设计工具（例如Figma）甚至不支持ColRV0，但我希望并相信这将是网络上颜色版式的未来。在短时间内，Colrv1已经出现了，已经有一些很好的例子，说明了该技术可以做什么，例如Reem Kufi和Bradley首字母缩写。

Colr和CSS

如果您使用的是颜色字体，则可能希望能够控制其颜色。到目前为止，这是不可能与CSS一起做的。字体 - 模式属性带来了覆盖字体的默认配色并应用自己的功能。该属性在COLRV0和COLRV1字体上起作用。 （Apple的Myles Maxfield解释说，SVG字体可以选择使用调色板，而COLR字体的所有颜色都会被CSS自动覆盖。）

提出一个不错的调色板是一项美术。某些类型的设计师为我们做了艰苦的工作，并在字体内包括其他调色板。您可以使用CSS中的基本板从这些不同的配色方案中选择。

您如何找出字体是否提供替代调色板？字体的网站可能会告诉您。如果没有，则有一个名为Wakamai火锅的方便工具，它将列出所有可用的配色方案（如下图所示）。在此示例中，我将使用Rocher Color，这是Henrique Beier的免费可变颜色字体。从查看Wakamai Undue，我们可以看到此字体使用四种颜色，并带有11种不同的调色板选项。

使用基本 - 板：0将选择默认的调色板（对于Rocher，是橙色和棕色的阴影）。

使用基本式：1将选择字体创建者定义的第一个替代调色板，依此类推。在以下代码示例中，我正在选择一个不同的灰色阴影的调色板：

 @font-palette-values-grays {
  font-family：罗彻（Rocher）；
  基础板：9;
}

一旦选择了使用CSS @font-palette-values规则的调色板，就可以使用字体 - 佩莱特属性进行应用：

 .grays {
  字体家庭：“ Rocher”；
  字体 - 佩莱特： - 格雷斯；
}

当然，您可能需要创建自己的调色板来匹配品牌颜色或满足自己的设计敏感性。如果您要覆盖所有颜色，则无需指定基础板。

让我们以开拓者类型的设计师David Jonathan Ross为例。默认情况下，它仅使用两种颜色，红色和白色。在下面的示例中，我要覆盖字体的两种颜色，因此基本板无关紧要，并且被省略了：

 @font-palette-values -pinkandGray {
  字体家庭：蹦极；
  覆盖色：
    0＃c1cbed，
    1＃ff3a92;
}

@font-palette-values -grayandpink {
  字体家庭：蹦极；
  覆盖色：
    0＃ff3a92，
    1＃c1cbed;
}

另外，您可以将基础板设置为起点，并选择性地更改一些颜色。在下面，我正在使用Rocher的灰色调色板，但用薄荷绿色覆盖一种颜色：

 @font-palette-values -graysremix {
  font-family：罗彻（Rocher）；
  基础板：9;
  覆盖色： 
    2 RGB（90,290,210）;
}

身体 {
  字体家庭：“ Rocher”；
  字体 - 佩莱特： -  graysremix;
}

指定覆盖色时，很难知道哪个字体将被哪个数字覆盖 - 您必须浏览和实验并通过反复试验和错误实现所需的效果。

如果您希望，甚至可以更改表情符号字体的颜色，例如Twemoji（如下所示）或Noto。这是Google的字体工程师的有趣演示。

当前限制

至少目前，一个令人遗憾的限制是，CSS自定义属性无法在 @font-palette-values中起作用。这意味着以下内容无效：

 @font-palette-values -pinkandBlue {
  字体家庭：蹦极；
  覆盖色：
    0 var（ - 粉红色），
    1 var（ - 蓝色）;
}

另一个限制是：动画和从一个字体 - 板到另一个字体 - 不插入的过渡 - 这意味着您可以立即从一个调色板切换到另一个调色板，但不能逐渐在它们之间进行动画。我梦dream以求的表情符号字体是可悲的。

浏览器支持

自版本15.4以来，Safari支持了字体 - 佩莱特和 @font-palette-values，并随着版本101的发布而降落在Chrome and Edge中。

此浏览器支持数据来自Caniuse，其中有更多详细信息。一个数字表明浏览器在该版本及以上支持该功能。

桌面

移动 /平板电脑

用例

您可能已经可以想象如何在自己的项目中使用颜色字体。但是，有几个特定的​​用例值得呼唤。

COLR和图标字体

图标字体可能不再是在网络上显示图标的最流行方法（Chris解释了原因），但仍被广泛使用。如果您使用具有多种颜色的图标字体，例如Fontawesome的Duotone或材料设计中的两色调图标，则字体板可以为自定义提供更轻松的方法。

解决表情符号问题

诺兰·劳森（Nolan Lawson）最近写了有关在网络上使用表情符号的问题。 Chrome开发人员博客解释了一个相当复杂的当前解决方案：

如果您支持用户生成的内容，则您的用户可能会使用表情符号。如今，扫描文本并替换图像中遇到的任何表情符号非常普遍，以确保一致的跨平台渲染以及与OS支持相比，支持新的表情符号的能力。然后，这些图像必须在剪贴板操作期间切换回文本。

如果获得更大的浏览器支持，Colrv1表情符号字体将提供更简单的方法。 ColRV1还具有任何大小的酥脆的好处，而本地浏览器表情符号会变得模糊，并以较大的字体尺寸像素化。

总结

在颜色字体之前，网络上的印刷创造力仅限于使用CSS应用中风或梯度填充。您总是可以使用矢量图像进行更自定义的事情，但这不是真实的文本 - 用户无法选择它并将其复制到剪贴板上，无法使用命令F在页面上搜索它，屏幕读取器或搜索引擎却不会读取它，并且您需要打开Adobe Illustrator来编辑副本。

颜色字体有可能真正吸引用户的注意力，使其非常适合着陆页和横幅。它们可能不是您经常遇到的东西，但是他们承诺可以为您的网站脱颖而出的Web设计带来新的表现力和创意可能性。

以上是COLRV1和CSS字体式板的详细内容。更多信息请关注PHP中文网其他相关文章！