根據(jù)Arcade Game排版的作者Toshi Omagari的說(shuō)法，世界上第一個(gè)多色數(shù)字字體是為1982年創(chuàng)建的，用於從未發(fā)行的視頻遊戲Insector。即使Colr字體格式自2018年以來(lái)（即使在Internet Explorer?。┮詠?lái)，Colr字體格式在網(wǎng)絡(luò)上都具有完整的跨瀏覽器支持，但在網(wǎng)絡(luò)上仍然相對(duì)罕見(jiàn)，多色字體（有時(shí)稱(chēng)為色類(lèi)型）。

該技術(shù)打開(kāi)了全新的印刷創(chuàng)造力。雖然我見(jiàn)過(guò)的某些顏色字體充其量是Lurid，但色彩字體很有趣，創(chuàng)新且引人注目。通過(guò)添加了新的CSS功能（包括字體 - 彩板屬性和 @font-palette-values規(guī)則），用於控制彩色字體的調(diào)色板以及Colr字體格式的演變，現(xiàn)在是潛入並嘗試現(xiàn)代網(wǎng)絡(luò)版本可以做的事情的絕佳時(shí)機(jī)。

Colr支持

我上次在2018年寫(xiě)了有關(guān)顏色字體的文章。當(dāng)時(shí)，有四個(gè)不同的標(biāo)準(zhǔn)，用於多色字體：Opentype-SVG，Colr，Sbix和CBDT/CBLC。您可以使用Chrachacheck查看您自己的瀏覽器支持的顏色字體格式。

Google Chrome已將Opentype-SVG標(biāo)記為“ Wontfix”，這意味著格式將永遠(yuǎn)不會(huì)受到Chrome或Edge的支持。 SBIX和CBDT/CBLC在網(wǎng)絡(luò)上大部分都可以忽略，因?yàn)樗鼈兌蓟稏鸥駡D像，並且在較大的字體大小上變得模糊?；段粓D的字體的較大文件大小也使它們成為Web的不良選擇。

Ulrike Rausch是LieBeheide的創(chuàng)建者，它是一種位圖顏色字體，它不肯定地複制了圓珠筆的外觀。她告訴我：“我最大的目標(biāo)始終是盡可能真實(shí)地複製手寫(xiě)文本。” “對(duì)於LieBeheide，我終於能夠用字體模擬這些手工屬性。缺點(diǎn)？字體文件中的所有png映像加起來(lái)並導(dǎo)致巨大的OTF文件大小。對(duì)於桌面應(yīng)用程序，例如Adobe Indesign，這可能不是問(wèn)題，但是在網(wǎng)絡(luò)上使用該字體幾乎不適用。”

所有瀏覽器都支持COLR字體（現(xiàn)在通常稱(chēng)為COLRV0）。 2月發(fā)布的Chrome（和Edge）版本的98版增加了對(duì)格式發(fā)展的ColRV1的支持。

此瀏覽器支持?jǐn)?shù)據(jù)來(lái)自Caniuse，其中有更多詳細(xì)信息。一個(gè)數(shù)字表明瀏覽器在該版本及以上支持該功能。

桌面

移動(dòng) /平板電腦

COLRV0和COLRV1

COLRV1是Opentype 1.9標(biāo)準(zhǔn)的一部分。儘管最初的ColRV0缺乏Opentype-SVG的許多創(chuàng)造性可能性，但ColRV1匹配這些可能性，同時(shí)避免了某些缺點(diǎn)。例如，COLRV0只能做純色，而ColRV1可以進(jìn)行線性，徑向和圓錐梯度。該格式還添加了合成和混合，並允許形狀重複使用以節(jié)省文件大小。

排版專(zhuān)家Roel Nieskins解釋說(shuō)：“我曾經(jīng)說(shuō)過(guò)Opentype-SVG格式是最優(yōu)秀的格式，因?yàn)樗峁┝俗疃喙δ苄?- 直到我意識(shí)到這太複雜了，對(duì)於像文本渲染這樣的低級(jí)工作。它在字體渲染級(jí)別上實(shí)現(xiàn)了SVG的基本子集。但是它與其他字體技術(shù)（暗示，可變軸等）的配合不佳，並且實(shí)施是一種痛苦。因此，我將側(cè)面切換到Colr。 Colr基本上重新使用了Opentype字體已經(jīng)擁有的所有內(nèi)容。它“只”增加了分層，並且可能會(huì)更改每一層的顏色。簡(jiǎn)單但有效?！?/p>

COLRV1完全與可變字體軸兼容，並且已經(jīng)有可變Colr字體（如功能徽章，Plakato Color和Rocher Color）的示例。

這是Ulrike Rausch的一個(gè)顯著示例，即該格式的可能性，即（當(dāng)前未發(fā)行的）字體，可以在數(shù)字上重新創(chuàng)建霓虹燈的外觀：

Akiem掌舵的類(lèi)型鑄造廠被Colrv1迷上了colrv1，告訴我：“ colrv1格式可能會(huì)對(duì)類(lèi)型設(shè)計(jì)產(chǎn)生與近年來(lái)可變字體相似的（甚至更大）的影響?！睂?duì)於Akiem來(lái)說(shuō)，無(wú)疑是上級(jí)格式。 “所有以前的彩色格式都是不良的駭客，可以為字形添加顏色。儘管某些人將Opentype-SVG視為一個(gè)很好的解決方案，但從我的角度來(lái)看，它根本不是。從務(wù)實(shí)的角度來(lái)看，SVG是Opentype開(kāi)放結(jié)構(gòu)中的“鎖定房間”。無(wú)法重複使用或鏈接數(shù)據(jù)或在其他字體表和SVG表之間創(chuàng)建連接。因此，我們無(wú)法使用可變的SVG數(shù)據(jù)製作可變字體?！?/p>

格式仍然是初期。 Mozilla尚未將ColRV1發(fā)貨，但在該格式上取得了積極的立場(chǎng)，並指出它具有“在Web使用中取代Opentype-SVG字體的潛力”。蘋(píng)果不願(yuàn)在野生動(dòng)物園中實(shí)施它。

COLRV1字體仍將顯示並在這些瀏覽器中可讀，但所有字母的顏色都將是單個(gè)純色（您可以使用CSS Color屬性設(shè)置，就像使用普通字體一樣）。我們尚未看到許多類(lèi)型的鑄造廠發(fā)布ColRV1字體，並且一些流行的設(shè)計(jì)工具（例如Figma）甚至不支持ColRV0，但我希望並相信這將是網(wǎng)絡(luò)上顏色版式的未來(lái)。在短時(shí)間內(nèi)，Colrv1已經(jīng)出現(xiàn)了，已經(jīng)有一些很好的例子，說(shuō)明了該技術(shù)可以做什麼，例如Reem Kufi和Bradley首字母縮寫(xiě)。

Colr和CSS

如果您使用的是顏色字體，則可能希望能夠控制其顏色。到目前為止，這是不可能與CSS一起做的。字體 - 模式屬性帶來(lái)了覆蓋字體的默認(rèn)配色並應(yīng)用自己的功能。該屬性在COLRV0和COLRV1字體上起作用。 （Apple的Myles Maxfield解釋說(shuō)，SVG字體可以選擇使用調(diào)色板，而COLR字體的所有顏色都會(huì)被CSS自動(dòng)覆蓋。）

提出一個(gè)不錯(cuò)的調(diào)色板是一項(xiàng)美術(shù)。某些類(lèi)型的設(shè)計(jì)師為我們做了艱苦的工作，並在字體內(nèi)包括其他調(diào)色板。您可以使用CSS中的基本板從這些不同的配色方案中選擇。

您如何找出字體是否提供替代調(diào)色板？字體的網(wǎng)站可能會(huì)告訴您。如果沒(méi)有，則有一個(gè)名為Wakamai火鍋的方便工具，它將列出所有可用的配色方案（如下圖所示）。在此示例中，我將使用Rocher Color，這是Henrique Beier的免費(fèi)可變顏色字體。從查看Wakamai Undue，我們可以看到此字體使用四種顏色，並帶有11種不同的調(diào)色板選項(xiàng)。

使用基本 - 板：0將選擇默認(rèn)的調(diào)色板（對(duì)於Rocher，是橙色和棕色的陰影）。

使用基本式：1將選擇字體創(chuàng)建者定義的第一個(gè)替代調(diào)色板，依此類(lèi)推。在以下代碼示例中，我正在選擇一個(gè)不同的灰色陰影的調(diào)色板：

 @font-palette-values-grays {
  font-family：羅徹（Rocher）；
  基礎(chǔ)板：9;
}

一旦選擇了使用CSS @font-palette-values規(guī)則的調(diào)色板，就可以使用字體 - 佩萊特屬性進(jìn)行應(yīng)用：

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

當(dāng)然，您可能需要?jiǎng)?chuàng)建自己的調(diào)色板來(lái)匹配品牌顏色或滿足自己的設(shè)計(jì)敏感性。如果您要覆蓋所有顏色，則無(wú)需指定基礎(chǔ)板。

讓我們以開(kāi)拓者類(lèi)型的設(shè)計(jì)師David Jonathan Ross為例。默認(rèn)情況下，它僅使用兩種顏色，紅色和白色。在下面的示例中，我要覆蓋字體的兩種顏色，因此基本板無(wú)關(guān)緊要，並且被省略了：

 @font-palette-values -pinkandGray {
  字體家庭：蹦極；
  覆蓋色：
    0＃c1cbed，
    1＃ff3a92;
}

@font-palette-values -grayandpink {
  字體家庭：蹦極；
  覆蓋色：
    0＃ff3a92，
    1＃c1cbed;
}

另外，您可以將基礎(chǔ)板設(shè)置為起點(diǎn)，並選擇性地更改一些顏色。在下面，我正在使用Rocher的灰色調(diào)色板，但用薄荷綠色覆蓋一種顏色：

 @font-palette-values -graysremix {
  font-family：羅徹（Rocher）；
  基礎(chǔ)板：9;
  覆蓋色： 
    2 RGB（90,290,210）;
}

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

指定覆蓋色時(shí)，很難知道哪個(gè)字體將被哪個(gè)數(shù)字覆蓋 - 您必須瀏覽和實(shí)驗(yàn)並通過(guò)反複試驗(yàn)和錯(cuò)誤實(shí)現(xiàn)所需的效果。

如果您希望，甚至可以更改表情符號(hào)字體的顏色，例如Twemoji（如下所示）或Noto。這是Google的字體工程師的有趣演示。

當(dāng)前限制

至少目前，一個(gè)令人遺憾的限制是，CSS自定義屬性無(wú)法在 @font-palette-values中起作用。這意味著以下內(nèi)容無(wú)效：

 @font-palette-values -pinkandBlue {
  字體家庭：蹦極；
  覆蓋色：
    0 var（ - 粉紅色），
    1 var（ - 藍(lán)色）;
}

另一個(gè)限制是：動(dòng)畫(huà)和從一個(gè)字體 - 板到另一個(gè)字體 - 不插入的過(guò)渡 - 這意味著您可以立即從一個(gè)調(diào)色板切換到另一個(gè)調(diào)色板，但不能逐漸在它們之間進(jìn)行動(dòng)畫(huà)。我夢(mèng)dream以求的表情符號(hào)字體是可悲的。

瀏覽器支持

自版本15.4以來(lái)，Safari支持了字體 - 佩萊特和 @font-palette-values，並隨著版本101的發(fā)布而降落在Chrome and Edge中。

此瀏覽器支持?jǐn)?shù)據(jù)來(lái)自Caniuse，其中有更多詳細(xì)信息。一個(gè)數(shù)字表明瀏覽器在該版本及以上支持該功能。

桌面

移動(dòng) /平板電腦

用例

您可能已經(jīng)可以想像如何在自己的項(xiàng)目中使用顏色字體。但是，有幾個(gè)特定的??用例值得呼喚。

COLR和圖標(biāo)字體

圖標(biāo)字體可能不再是在網(wǎng)絡(luò)上顯示圖標(biāo)的最流行方法（Chris解釋了原因），但仍被廣泛使用。如果您使用具有多種顏色的圖標(biāo)字體，例如Fontawesome的Duotone或材料設(shè)計(jì)中的兩色調(diào)圖標(biāo)，則字體板可以為自定義提供更輕鬆的方法。

解決表情符號(hào)問(wèn)題

諾蘭·勞森（Nolan Lawson）最近寫(xiě)了有關(guān)在網(wǎng)絡(luò)上使用表情符號(hào)的問(wèn)題。 Chrome開(kāi)發(fā)人員博客解釋了一個(gè)相當(dāng)複雜的當(dāng)前解決方案：

如果您支持用戶(hù)生成的內(nèi)容，則您的用戶(hù)可能會(huì)使用表情符號(hào)。如今，掃描文本並替換圖像中遇到的任何表情符號(hào)非常普遍，以確保一致的跨平臺(tái)渲染以及與OS支持相比，支持新的表情符號(hào)的能力。然後，這些圖像必須在剪貼板操作期間切換回文本。

如果獲得更大的瀏覽器支持，Colrv1表情符號(hào)字體將提供更簡(jiǎn)單的方法。 ColRV1還具有任何大小的酥脆的好處，而本地瀏覽器表情符號(hào)會(huì)變得模糊，並以較大的字體尺寸像素化。

總結(jié)

在顏色字體之前，網(wǎng)絡(luò)上的印刷創(chuàng)造力僅限於使用CSS應(yīng)用中風(fēng)或梯度填充。您總是可以使用矢量圖像進(jìn)行更自定義的事情，但這不是真實(shí)的文本 - 用戶(hù)無(wú)法選擇它並將其複製到剪貼板上，無(wú)法使用命令F在頁(yè)面上搜索它，屏幕讀取器或搜索引擎卻不會(huì)讀取它，並且您需要打開(kāi)Adobe Illustrator來(lái)編輯副本。

顏色字體有可能真正吸引用戶(hù)的注意力，使其非常適合著陸頁(yè)和橫幅。它們可能不是您經(jīng)常遇到的東西，但是他們承諾可以為您的網(wǎng)站脫穎而出的Web設(shè)計(jì)帶來(lái)新的表現(xiàn)力和創(chuàng)意可能性。

以上是COLRV1和CSS字體式板的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！