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

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

Colr支持

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

Google Chrome已將Opentype-SVG標記為“ Wontfix”，這意味著格式將永遠不會受到Chrome或Edge的支持。 SBIX和CBDT/CBLC在網(wǎng)絡上大部分都可以忽略，因為它們都基於柵格圖像，並且在較大的字體大小上變得模糊。基於位圖的字體的較大文件大小也使它們成為Web的不良選擇。

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

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

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

桌面

移動 /平板電腦

COLRV0和COLRV1

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

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

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

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

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

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

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

Colr和CSS

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

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

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

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

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

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

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

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

當然，您可能需要創(chuàng)建自己的調(diào)色板來匹配品牌顏色或滿足自己的設計敏感性。如果您要覆蓋所有顏色，則無需指定基礎板。

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

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

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

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

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

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

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

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

當前限制

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

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

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

瀏覽器支持

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

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

桌面

移動 /平板電腦

用例

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

COLR和圖標字體

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

解決表情符號問題

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

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

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

總結(jié)

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

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

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