簡潔、易於壓縮的色彩向量字型，搭配您喜愛的各種字型 變種版本
在 Chrome 98 版中，Chrome 和 Fonts 團隊新增支援 COLRv1， 進化 COLRv0 字型格式，讓色彩字型更加廣泛 新增漸層、合成和混合，改善內部形狀重複使用 提供清晰易讀的字型檔案
立即著色
在網路上，文字通常會以 CSS 中指定的顏色繪製。字型會
未定義任何特定顏色，只會指出像素應該位於何處
位置。這通常是好事。CSS 可讓作者彈性選擇
顏色。不過，字符有時會包含多種顏色
意義。舉例來說，這個標記的 
具有淺藍色、粉紅色和白色條紋，則不會
如果只是以目前文字顏色繪製，就會採用相同的含義。
對大多數使用者而言，表情符號是他們唯一看到的色彩字型。表情符號
通常會透過系統表情符號字型顯示在網路上，或插入圖片
(有自己的小工具 
)。大型檔案
對於點陣圖型色彩字型來說更是如此
表情符號字型透過支援 COLRv1，我們希望
網路及其他場所的創意顏色字型
讓我看看你的色彩！
以下提供幾個範例，供您參考：
範例中使用的 Google Fonts 素材資源範例位於 Google Fonts Web API。這些 並未列於 fonts.google.com 目錄中 僅適用於 Chrome 98 以上版本，並展示實驗性作品。
您現在可以使用免費的開放原始碼工具，自行製作 COLRv1 字型。確認 請參閱 nanoemoji 字型編譯器 可讓您從 SVG 來源圖片建構 COLRv1 字型，然後試用 Chrome 98 以上版本。你可以嘗試自行旋轉 Bungee Spice 漸層色彩 這些操作說明。
舉例來說，您可以將 Bungee Spice 字型修改為藍色和紅色的漸層，如下所示：
在 Twitter 上透過推文分享結果 @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 集大小從點陣圖版本的 9 MB 縮減為 1.85 MB 。
顏色字型使用案例
搶眼的頭條新聞
全新顏色字型可凸顯視覺醒目顯示、廣告標題和橫幅 。
不必再替換圖片：表情符號字型
如果您支援使用者產生的內容，使用者可能會使用表情符號。今天 常見的做法是掃描文字 並將圖片中所有的表情符號替換成圖片 確保跨平台算繪一致，且能支援新版 表情符號。這些圖片也必須切換回文字 進行同步測試以下為實際範例：
如果你有表情符號字型，則只需轉譯該字型的文字，如下所示：
<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 樣式的阿拉伯文字型使用顏色漸層做為 以藝術藝術方式詮釋傳統書法的墨水 看起來就像阿拉伯文的庫非寫作風格 不是用乳頭和墨水寫成，而是用石頭雕刻
特徵偵測
目前，正在判斷瀏覽器引擎是否支援特定顏色 字型的格式，可能是由使用者代理程式探查或搜尋 例如 ChromaCheck @PixelAmbacht 可測試顏色算繪 畫布上的字符但這兩種解決方案並不是最佳解決方案。特徵測試應偵測 只有特定功能本身，並且避免使用者代理程式遭到探查。ChromaCheck 敬上 程式庫就不需要執行會耗用大量資源的 2D 畫布作業， 判斷是否支援
Chrome 團隊想改善這一點，並已開始一系列討論 [1、 2] 已加入 CSS 工作團隊 提供 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 座談會。
- 國際萬國碼 (Unicode) 會議 #45：向量色彩字型，由 Roderick 談話 Sheeter、Peter Constable 與 Dominik Röttsches (影片、 對話詳細資料)
- nanoemoji 字型編譯器 SVG 圖片中的 COLRv1 字型
- Google 字型 color-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、Lemberg、Laurence Penney Chris Lilley、David Jonathan Ross、Underware、Just van Rossum、Roel Nieskens 和 。