DAY 19｜OpenType Color Font：實作

15th鐵人賽

chingru

2023-10-04 10:34:22

231 瀏覽

分享至

如我們昨天所介紹的，以支援程度的角度來看，COLR/CPAL 規格的彩色字型可以獲得最廣的相容性；而除了顯示之外，也可以透過 CSS 的調整，對其顏色進行讀取和覆寫的操作。

檢查瀏覽器相容性

雖然 SBIX、CBDT/CBLC、OpenType-SVG、COLR/CPAL 都是 OpenType 定義的彩色字型規格，但各個排版引擎與瀏覽器對他們的支援都不一樣，我們可以打開 Chromacheck 這個網頁來檢查瀏覽器對彩色字型的相容性。

以最常見的桌面版 Chrome 而言，應該除了 OpenType-SVG 之外，其他都是綠色的。不過，如果你是使用 Safari，或是 iPhone 和 iPad 上的任何瀏覽器（包含 Safari 和第三方瀏覽器——畢竟他們實際上都是 WebKit 引擎的套皮），則會顯示不支援 COLRv1 和 CBDT/CBLC 格式。

不難發現，其實 COLR/CPAL v0 的泛用性是最高的。

Rocher Color

在這裡，我們以 David Jonathan Ross 設計的 Rocher Color 這套字型為例。

藉由 Wakamai Fond 這個網站的分析，我們可以知道 Rocher Color 是一套擁有兩個可變軸、11 個基本色版、每種色盤擁有四個顏色的 COLR/CPAL v0 字型（This font has COLR color glyphs. Your browser supports this format. It has 11 color palettes of 4 colors.）

設定基本色盤

那麼，使用者要怎麼使用這 11 個基本色盤呢？我們可以透過 css 的 @font-palette-values 規則去指定，例如預設的色盤就是：

.class {
  font-palette: --Default;
}

@font-palette-values --Default {
  font-family: Rocher;
  base-palette: 0;
}

如果要選第一個色版（粉紅配色）的話：

.class {
  font-palette: --Pink;
}

@font-palette-values --Pink {
  font-family: Rocher;
  base-palette: 1;
}

覆寫色盤 Override

若是設計師配好的基本色版裡面都沒有喜歡的樣子呢？我們可以透過 override-colors 的方法強制覆寫某個圖層的顏色，如果要覆寫「第一個色版裡的第二組顏色」，將其設為白色（#FFFFFF）的話，可以透過：

.class {
  font-palette: --PinkPartOverride;
}

@font-palette-values --PinkPartOverride {
  font-family: Rocher;
  base-palette: 1;
  override-colors: 2 #FFFFFF;
}

萬一完全都想換掉？透過類似的方法，可以完全的覆寫顏色，此時要選哪一個當基本色版就都沒關係了，反正顏色都會被換掉：

.class {
  font-palette: --OverrideAll;
}


@font-palette-values --OverrideAll {
  font-family: Rocher;
  override-colors:
    0 #2C4251,
    1 #D16666,
    2 #B6C649,
    3 #1CAD70;
}