像彩虹般的字型:Color Font

開始前先來介紹 Gilbert 這款字體,它是一款自帶多種色彩的字型,用戶輸入後即會顯示繽紛的色彩,無須而外在修改。
該字體是具有象徵意義,是為了紀念 LGBTQ+ 彩虹旗的創作者 Gilbert Baker 對於社群貢獻而生,其中「色彩」是不可或缺的顏色,傳遞驕傲、多元和包容的精神。
電腦會選土豆,字體也能是彩色
其實彩色字型並不罕見,你我常用的 emoji 就是最佳實踐之一,讓我們來看看如何做到的吧!
第一步:標準化
要讓大家能正確的看到五顏六色的字體,就需要由具有一致且大部分人認同的標準與規範。
通常這幾些事會由行業內的領頭公司、組織進行,這次參戰的分別有:Microsoft、Apple、Adobe、Google,以及 Mozilla。
前面幾間相信大家都耳熟能詳,最後一間也是對網際網路有著重要影響的元老級組織,其前身為網景公司。
簡單直接:SBIX 、CBDT/CBLC
要彩色物件?沒問題,用最簡單粗暴的方法,直接塞入一張點陣圖片。Apple的SBIX (Standard Bitmap Graphics)與 Google 的 CBDT/CBLC(Color Bitmap Data / Color Bitmap Location)之方法就是如此。
看名稱就知道,是直接將一張點陣圖放入編碼中。這種做法可以讓物件保有真實世界的質感,但也因為是點陣圖,因此放大存在失真的可能(會有鋸齒邊),且因為是圖片,加總起來檔案容量也不小。

進階:OpenType-SVG
聰明的你一定知道,如果點陣圖會失真,那就放向量圖啊!Adobe 與 Mozilla 也是這麼想的,他們希望在字形中鑲嵌 SVG 格式的圖檔。這讓彩色字型可以無限放大,但是無法單獨改顏色,如果想要製作出非裔、華裔...等,膚色較多元的同個表情符號,就需要一個一個單獨建立,且以 Chromium 為核心的瀏覽器都不支援,會直接顯示黑色。
以 Adobe EmojiOne 為例,同樣的「比讚」符號,有六種膚色,就需要單獨繪製 6 張 SVG 圖檔,並一一嵌入。

更上一層樓: COLR/CPAL
計算機領域中,哪能缺少我們 M大 – Microsoft。他們提出的方案一樣是向量圖形,但是同個圖形中,拆分多個圖層,並記錄圖層、色彩等資訊。
同樣以「比讚」符號為例,如果用 COLR/CPAL 技術,只需要繪製 3 個字符框,透過改變不同圖層顏色,即可做到多種顏色效果。

普羅麥克斯: COLR/CPAL V1
在此之後 Microsoft 又與 Google(對,他又來了)提出擴充,允許加入更多屬性,例如:Alpha 值,也就是允許透明度與漸層,甚至是混合模式。為 Color Font 帶來更多可能性。
2024 年在微軟更新了新版 Segoe UI Emoji 就是使用 COLR/CPAL V1 完成,在 Windows 11 中就是使用該字型,預設會出現 3D版本,如果軟體不支援,則會跳回2D版本。


隨堂測驗:
請問根據以下圖片 Gilbert Color 最有可能是使用何種技術呢?提示:該字體為向量外框
