採用所有喜愛的漸層色彩，提供壓縮友善的緊湊色彩向量字型。
在 Chrome 98 中，Chrome 和字型團隊已新增對 COLRv1 的支援。COLRv1 是 COLRv0 字型格式的進階版本，旨在透過新增漸層、合成和混合，以及改善內部形狀重用，讓色彩字型廣泛應用於經過壓縮的清晰簡潔字型檔案。
Color now
在網路上，文字通常會以 CSS 指定的顏色繪製。字型並未定義任何特定顏色，只會指出應放置像素的位置。這通常是好事。CSS 可讓作者靈活選擇顏色。不過，有時一個字符會包含多種顏色，這些顏色組合起來會代表某種意義。舉例來說，如果這個旗幟 
僅以目前文字顏色繪製，就無法傳達相同的意思。
目前，表情符號是大多數使用者看到的唯一彩色字型。表情符號通常會透過系統表情符號字型或插入圖片 (
有其自身的複雜性) 顯示在網頁上。由於檔案大小太大，尤其是以位圖為基礎的彩色字型，因此很難將表情符號用於網頁字型。我們希望透過支援 COLRv1，讓網站和其他地方都能廣泛使用創意的彩色字型。
展現你的本色
我們建立了幾個範例供您試用：
範例中使用的 Google 字體範例素材資源，可在 Google 字體網路 API 中找到。這些字型僅適用於 Chrome 98 以上版本，且僅供展示實驗性質的字型，因此不會列在 fonts.google.com 的索引項目中。
您現在可以使用免費的開放原始碼工具製作自己的 COLRv1 字型。請試試 nanoemoji 字型編譯器，您可以使用這項工具從 SVG 來源圖片建立 COLRv1 字型，然後在 Chrome 98 以上版本中試用。請按照這篇文章的說明，變更漸層色彩，嘗試製作自己的 Bungee Spice。
舉例來說，您可以修改 Bungee Spice 字型，讓字型呈現藍色和紅色的漸層效果，如下所示：
請將結果推文至 @googlefonts 🙂? 不妨試試放射或掃描漸層效果。
COLRv1 的新功能
字型格式支援多種顏色支援方式，每種方式都有不同的取捨，但目前尚未有任何方式在網路上成功。(如要進一步瞭解取捨之處，請參閱 Dominik 在 BlinkOn 15 大會上的演講內容)。Chrome 98 支援 COLRv1，這是 COLRv0 的進階版本。我們希望 COLRv1 的圖形功能和精簡檔案，能讓它成為許多彩色字型用途的理想選擇。COLRv1 新增了漸層、合成和混合功能，並改善內部形狀重複使用功能，以便製作更精簡的檔案。
COLRv1 的表現力大致等同於 SVG 原生，加上額外加入的混合和合成功能。顏色填滿有四種類型：純色、線性漸層、放射漸層和掃描/圓錐漸層。使用者可以使用完整的平移、旋轉、扭曲和縮放轉換，藉由 COLRv1 重新調整及轉換字元圖元元素。此外，它還支援字型變化，並可重複使用字型中的現有形狀定義格式。
以水晶球表情符號為例：星形亮點的形狀相同，但大小不同，因此只需重新調整及重複使用一個形狀，檔案內就不會出現重複的形狀。這個格式可讓您在新的字形中重複使用完整的字形，而無須為每個字形重複編碼相同的形狀。想像一下，有一種帶有花卉裝飾的裝飾性彩色字型，只要參照現有的彩色字形，就能將相同的花朵形狀放在不同的字母上。針對網頁字型用途，COLRv1 在 woff2 下可提供良好的壓縮效果。舉例來說，使用 COLRv1 的 Twemoji 測試版本經過擴充後約為 1.2 MB，但以 woff2 格式則約為 0.6 MB。完整的 Noto Emoji 字元集組建，從 9 MB 的位圖版本縮減至 1.85 MB 的 COLRv1+woff2 格式。
彩色字型用途
朗朗上口的廣告標題
新穎的色彩字型可讓醒目顯示、標題和橫幅更加醒目。
不再取代圖片：表情符號字型
如果您支援使用者原創內容，使用者可能會使用表情符號。目前，掃描文字並將遇到的任何表情符號替換為圖片，是相當常見的做法，可確保跨平台一致的算繪效果，以及支援比作業系統更新的表情符號。然後，在剪貼簿作業期間，這些圖片必須切換回文字。以下是實際範例：
如果您有表情符號字型，只要將文字轉譯為該字型即可，如下所示：
<style>
@import url(https://fonts.googleapis.com/css2?family=Noto+Color+Emoji);
.emoji {
font-family: "Noto Color Emoji", sans-serif;
}
</style>
<span class="emoji">🙂</span>
同樣地，在表情符號回應元件中，COLRv1 可讓您使用精簡的字型檔案，而非圖像素材資源目錄。
試想一下，要打造完整的表情符號挑選器，您需要擷取多少張圖片！
圖示字型的顏色
在圖示字型中使用顏色可提高清晰度，讓字符更容易理解。
藝術表達
節省空間的彩色字型可在網路上的文字中展現全新的藝術表達方式。這個 Kufi 風格阿拉伯字型的範例使用色階來詮釋傳統書法的墨水流動效果，並將其套用至 Kufi 風格的阿拉伯文書寫方式，這種書寫方式源自於使用尖筆和墨水書寫，而非刻在石頭上。
特徵偵測
目前，您可以透過使用者代理程式嗅探或在 @PixelAmbacht 的 ChromaCheck 等程式庫中搜尋，找出瀏覽器引擎是否支援特定的色彩字型格式，以便在畫布上測試色彩符號的算繪。這兩種解決方案都不是最佳做法。功能測試應只偵測特定功能本身，避免探查使用者代理程式。ChromaCheck 程式庫不應需要執行資源密集的 2D 畫布作業，以便判斷支援情形。
Chrome 團隊希望改善這個情況，因此已在 CSS 工作小組中展開一系列討論 [1、2]，提供有關瀏覽器字型技術在 JavaScript 和 CSS 中宣告式支援的資訊。團隊預計在日後的 Chrome 版本中，針對彩色字型和其他字型技術發布高效的功能偵測功能。
如果您想在專案中使用彩色字型，但 COLRv1 僅支援 Chrome，則有兩種方法可供選擇：請字型供應商提供同時包含單色字形的 COLRv1 字型。不支援 COLRv1 的使用者代理程式會改為轉為單色圖形。或者，您也可以使用 ChromaCheck 程式庫或使用者代理程式嗅探功能，判斷是否支援 COLRv1。接著，您可以提供 CSS，在支援的使用者代理程式中載入 COLRv1 字型，並在其他瀏覽器中使用替代字型格式，例如 COLRv0、點陣圖字型格式或 OpenType SVG。
CSS 字型色彩選取器支援
如果使用不同的顏色組合不需要新的字型，將會非常實用。幸好，我們有一個機制：font-palette CSS 屬性。Chrome 團隊正在努力在 Chrome 中支援字型調色盤。
COLRv1 字型與您
如果您對 COLRv1 字型感興趣，請向字型供應商洽詢在專案中使用的 COLRv1 彩色字型，試試上述範例和示範，或者不妨直接著手自行製作，並進行實驗。
如果您對 Chrome 中的 COLRv1 有任何意見，請在 blink-dev 電子郵寄清單上發布，或在問題追蹤工具中提出問題。如果您對 COLRv1 字型格式本身有任何意見回饋，請在 COLRv1 規範 GitHub 存放區中回報問題。
我們很高興在 Chrome 98 中，COLRv1 為網路帶來全新的排版創意。
瞭解詳情
如需更多詳細資訊，請參閱下列資源：
如要瞭解 COLRv1 的運作方式，以及如何在 Chrome 中實作，請參閱 Dominik 在 BlinkOn 15 大會上的演講。
- 國際萬國碼大會 #45：向量色彩字型，由 Roderick Sheerer、Peter Constable 和 Dominik Röttsches 講述 (影片、講座詳細資料)
- nanoemoji 字型編譯器，可從 SVG 圖片產生 COLRv1 字型
- Google 字體的 色彩字體 GitHub 存放區，其中包含 Noto Emoji、Twemoji 和其他範例字體的最新版本
- DJR 展示Bradley Initials 字型，探索 COLRv1
- ChromaCheck 工具和程式庫：用於偵測可用的彩色字型技術
特別銘謝
感謝 Behdad Esfahbod、Cosimo Lupo、Peter Constable、Ben Wagner、Werner Lemberg、Dave Crossland、Vladimir Levantovsky、Jonathan Kew、Laurence Penney、Chris Lilley、David Jonathan Ross、Underware、Just van Rossum、Roel Nieskens 和其他人對 COLRv1 的貢獻。