簡潔、壓縮友善的彩色向量字型，提供您喜愛的所有漸層色彩。
在 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 Glyph 集的建構已從 COLRv1+woff2 表單中，從點陣圖版本的 9 MB 縮減為 1.85 MB。
彩色字型用途
搶眼的頭條新聞
新穎的色彩字型可讓醒目顯示、標題和橫幅更加醒目。
不再取代圖片：表情符號字型
如果您支援使用者原創內容，使用者可能會使用表情符號。如今，我們很常掃描文字，並將圖片遇到的任何表情符號替換為圖片，藉此確保跨平台轉譯作業的一致性，並且能夠支援比 OS 支援的較新表情符號。然後，在剪貼簿作業期間，這些圖片必須切換回文字。以下為實際範例：
如果您有表情符號字型，只要在字型中算繪文字即可，如下所示：
<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 郵寄清單中張貼問題，或透過 Issue Tracker 回報問題。如果您對 COLRv1 字型格式本身有任何意見回饋，請在 COLRv1 規範 GitHub 存放區中回報問題。
Chrome 98 版推出後，我們很期待 COLRv1 將豐富的字體創意融入網路。
瞭解詳情
如果想進一步瞭解相關詳情，歡迎多加利用以下資源：
如要瞭解 COLRv1 的運作方式，以及如何在 Chrome 中實作，請觀看 Dominik 的 BlinkOn 15 座談會。
- 國際萬國碼大會 #45：向量色彩字型，由 Roderick Sheerer、Peter Constable 和 Dominik Röttsches 講述 (影片、講座詳細資料)
- nanoemoji 字型編譯器，可從 SVG 圖片產生 COLRv1 字型
- Google Fonts 的顏色字型 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 的貢獻。