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中文網其他相關文章！