Chrome 98 中的 COLRv1 色彩漸層向量字型

Dominik Röttsches
Dominik Röttsches
Rod Sheeter
Rod Sheeter

精簡、可壓縮且適合壓縮的色彩向量字型,以及所有您喜愛的漸層變種版本。

在 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 字型修改為藍色和紅色漸層:

「Bungee Spice」色彩字型中的「沙丘」,以藍色和紅色漸層替代。

在 Twitter 上將結果傳送至 @googlefonts 🙂? 為什麼要試試放射漸層或清除漸層?

COLRv1 的新功能

字型格式支援多種支援色彩的方式,各有不同的取捨,但網路目前還是沒有成功。(如要進一步瞭解優缺點,請觀看 Dominik 的 BlinkOn 15 會議講座)。在 Chrome 第 98 版中,我們支援 COLRv1,這是演變 COLRv0 的過程。我們希望能 COLRv1 結合圖形功能和密集檔案,成為多種色彩字型用途的最佳選擇。COLRv1 新增了漸層、合成及混合,並改善內部形狀的重複使用效果,以建立更精簡的檔案。

「COLRv1」擁有相當強大的功能,大致等同於 SVG Native,同時在頂端新增混合和合成。色彩填滿有四種類型:單色、線性漸層、放射漸層和掃色漸層。COLRv1 可讓您使用完整的平移、旋轉、隱藏和縮放轉換組合,重新定位及轉換字符元素。此外,它也支援字型變化版本,並在字型中重複使用現有的形狀定義格式。

藍色和紫色水晶球的表情符號,棕色的基座上有重複使用星星的表情符號。
水晶球表情符號中重複使用形狀

例如以水晶球的表情符號為例:星形高亮度的形狀相同,但大小不同,因此只需要一個形狀可以重新定位並重複使用,無須在檔案內複製。這種格式可讓您在新的字符中重複使用完整字符,而不必對每個字符進行多餘的編碼。假設有一個帶有花卉裝飾的裝飾色字型,透過參照現有的色字符號,將相同的花朵形狀放在不同的字母上。針對網路字型用途,COLRv1 會在 woff2 底下順利壓縮。舉例來說,使用 COLRv1 的 Twemoji 測試版本大約增加 1.2 MB,但 Woff2 形式約為 0.6 MB。完整的 Noto Emoji Glyph 集版本已從 COLRv1+woff2 表單中的點陣圖版本從 9 MB 減少為 1.85 MB。

比較 Noto 表情符號的點陣圖字型與 COLRv1 字型的長條圖,約 9 MB 比 1.85 MB
WOFF2 壓縮後,Noto Emoji 字型大小 CBDT/CBLC 與 COLRv1。

顏色字型用途

吸睛標題

新的顏色字型會醒目顯示視覺元素、廣告標題和橫幅,讓圖片更加醒目。

Plakato Color Happy 2022:這是由創新的 Underware 開發的創新類型 Underware (Twitter:@underware、Instagram:@underwarefoundry) 所製作,帶有活力四射的掃除漸層。如要進一步瞭解 Underware 的第一版 COLRv1,請參閱他們的網誌文章

不必再更換圖片:表情符號字型

如果您支援使用者產生的內容,使用者可能會使用表情符號。如今,我們經常要掃描文字,並替換圖片遇到的任何表情符號,以確保跨平台算繪一致,且能夠支援比 OS 支援的較新的表情符號。然後在剪貼簿作業期間,這些圖片必須切換回文字。以下提供一個實際範例:

程式碼片段:以 img 標記和中繼資料的形式顯示內嵌圖片,做為即時通訊記錄的一部分
Google Chat 的圖片替換功能

如果您建立了表情符號字型,則只需轉譯字型中的文字,如下所示:

<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 可讓您使用精簡字型檔案,而非圖片素材資源目錄。

如同 GitHub 上的表情符號挑選器 UI
GitHub 上的表情符號回應挑選器

想像你還要擷取多少圖片,才能獲得完整的表情符號挑選器!

圖示字型中的顏色

在圖示字型中使用顏色可提高字符,讓字符更容易理解。

黑色外框的三個綠色圖示
來自 https://fonts.google.com/icons 的 Material 雙色調圖示

藝術表現

善用空間的色彩字型,讓網路文字中的文字展現新形式的藝術表現。這個 Kufi 樣式的阿拉伯文字型使用顏色漸層做為藝術解釋,用來解讀傳統書法的墨非風格所呈現的圖形流動情形,這源自於不是用 nib 和墨水寫成,而是以石頭做的。

由黑色變成紅色的阿拉伯字母。
Reem Kufi Ink,Khaled Hosny 製作的阿拉伯文字型

功能偵測

目前,如要測試瀏覽器引擎是否支援特定色彩字型格式,請使用使用者代理程式探勘,或使用 @PixelAmbachtChromaCheck 等程式庫中搜尋,以測試 Canvas 色彩字符的算繪作業。這兩種解決方案都不是最佳解決方案。功能測試只應偵測特定功能本身,並避免使用者代理程式遭到探查。因為 ChromaCheck 程式庫不應執行會耗用大量資源的 2D Canvas 作業來判斷支援。

Chrome 團隊想要改善這一點,也開始了 CSS 工作團隊的討論 [12],針對 JavaScript 的瀏覽器字型技術支援和在 CSS 中以宣告方式提供支援的相關資訊。該團隊計畫在日後的 Chrome 版本中推出高效率的色彩字型和其他字型技術功能偵測功能。

如果您想在 COLRv1 僅支援 Chrome 時,在專案中使用顏色字型,可以採用以下兩種方式:請向字型廠商索取包含單色字符的 COLRv1 字型。不支援 COLRv1 的使用者代理程式會改回顯示單色字符。或者,您也可以使用 ChromaCheck 程式庫或使用者代理程式探查,判斷是否提供 COLRv1 支援。接著,您要提供 CSS 來載入 COLRv1 字型以支援使用者代理程式,並在其他瀏覽器中使用如 COLRv0、點陣圖字型格式或 OpenType SVG 等替代字型格式。

CSS 字型調色盤支援

如果使用不同的顏色組合不需要新字型,這種做法非常實用。幸好,存在機制:字型調色盤 CSS 屬性。Chrome 團隊正著手在 Chrome 中新增對字型調色盤的支援

COLRv1 字型和你

如果 COLRv1 字型讓您有興趣,請向您的字型廠商詢問要在專案中使用的 COLRv1 色彩字型,或嘗試上述範例和示範,或者直接開始嘗試自行建立嗎?

如果您對 Chrome 中的 COLRv1 有任何意見,請在 blink-dev 郵寄清單中張貼問題,或透過 Issue Tracker 回報問題。如果您對 COLRv1 字型格式本身有任何意見,請在 COLRv1 規格 GitHub 存放區中回報問題。

在 Chrome 第 98 版中,我們很高興看到 COLRv1 將全新的字體創作技術帶到網路世界。

瞭解詳情

如需瞭解詳情,請參考以下其他資源:

如要瞭解 COLRv1 的運作方式,以及如何在 Chrome 中實作 COLRv1,請觀看 Dominik 的 BlinkOn 15 會議講座。

特別銘謝

感謝 Behdad Esfahbod、Cosimo Lupo、Peter Constable、B Ben Wagner、Werner Lemberg、Dave Crossland、Vladimir Levantovsky、Jonathan Kew、Laurence Penney、 Chris Lilley、David Jonathan Ross、Underware、Just van Rossum、 RoelsRa 和 妮可