在 昨天的 FontKit 介紹 裡，我們知道許多 Webfont 服務商為了加速字型載入，會將一個字型檔案拆分成多個 subset font，並透過 unicode-range 的方式，讓網頁只抓取用得到的 woff 檔。

而在 Google Font 裡，甚至可以直接調用 API，抓取 僅含有特定字型的特定字符 的 woff，方法如下：

https://fonts.googleapis.com/css?family=<FontFamilyName>&text=<TextYouWant>

在這裡，我們還是以老朋友 Noto Color Emoji 為例，並再次請來我們的老朋友 🐬（U+1F42C）為例，能透過這個網址直接抓取：

https://fonts.googleapis.com/css?family=Noto+Color+Emoji&text=🐬

內容為一個 Stylesheet：

@font-face {
  font-family: 'Noto Color Emoji';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/l/font?kit=Yq6P-KqIXTD0t4D9z1ESnKM3-HpFabts6diywYkdG2YmD0U&skey=a373f7129eaba270&v=v25) format('woff2');
}

body {
  --google-font-color-notocoloremoji:colrv1;
}

其中 src 來源的 woff2 檔案，就是 僅包含 🐬 的 Noto Color Emoji 字型檔。

網頁的構造

我們先寫一個超簡單的網頁來顯示這隻可愛的小海豚 🐬：

<div class="dolphin">🐬<div>

並按照 Google Font API 回傳的 stylesheet 設定：

@font-face {
  font-family: 'Noto Color Emoji';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/l/font?kit=Yq6P-KqIXTD0t4D9z1ESnKM3-HpFabts6diywYkdG2YmD0U&skey=a373f7129eaba270&v=v25) format('woff2');
}

body {
  --google-font-color-notocoloremoji:colrv1;
}

.dolphin {
    font-family: 'Noto Color Emoji', sans-serif;
}

此時，我們可以看到一隻可愛的海豚！

另一方面，藉由 FontKit 套件，讓我們直接拆開這個 僅包含🐬的 Noto Color Emoji 字型檔。

const fontPath = "https://fonts.gstatic.com/l/font?kit=Yq6P-KqIXTD0t4D9z1ESnKM3-HpFabts6diywYkdG2YmD0U&skey=a373f7129eaba270&v=v25"
const response = await fetch(fontPath);
const arrayBuffer = await response.arrayBuffer();
const buf = new Buffer(arrayBuffer);
const font = fontkit.create(buf);

並印出該字型檔的色盤資訊：

~ console.log(font.CPAL.colorRecords)
> (4) 0: {blue: 166, green: 109, red: 0, alpha: 255, parent: {…}, …}
      1: {blue: 48, green: 43, red: 45, alpha: 255, parent: {…}, …}
      2: {blue: 225, green: 180, red: 54, alpha: 255, parent: {…}, …}
      3: {blue: 245, green: 236, red: 221, alpha: 255, parent: {…}, …}

太好了，我們現在知道了兩件事：

1. 這隻小海豚便是由這 四個顏色 所組成的。
2. 這 四個顏色與其對應的圖層編號。

在 DAY 19 的 OpenType Color Font：實作 裡，我們知道只要能替換色版的顏色與圖層編號，就能藉由 override-colors 取代原本的字符顏色，所以我們也可以對這隻小海豚 🐬 進行顏色覆寫的操作，舉例來説，將編號 2 的圖層由 rgba(54, 180, 225, 255) 的藍色換成 rgba(93, 172, 129, 1) 的綠色：

.dolphin{
  font-palette: --customize;
}

@font-palette-values --customize {
  font-family: Noto Color Emoji;
  override-colors: 2 rgba(93, 172, 129, 1);
}

如此一來，我們得到了什麼呢？一隻綠色的海豚！

更進一步的想法是，我們能不能遵從 override-colors 的操作，自由替換任何字符，包括 Emoji 在內的顏色？