使用 Color Font ( 彩色字型 )

在現代網頁設計中，文字已經不再侷限於單一色彩。透過 Color Font ( 彩色字型 )，開發者可以控制彩色文字的各種顏色色盤，增添視覺趣味與品牌識別度，這篇教學會介紹 Color Font，以及在 CSS 中使用 Color Font，還會透過 font-palette 與 @font-palette-values 設定與改變色彩。

快速導覽：

• 認識 Color Font 彩色字型
• 取得 Color Font 彩色字型
• 讀取 Color Font 的色盤資訊
• 使用 @font-palette-values 和 font-palette
• 使用 @font-palette-values 和 override-colors
• 製作彩色文字顏色變換動畫

認識 Color Font 彩色字型

Color Font 是一種可以在字型中內嵌色彩、圖層、甚至漸層的字型格式，文字本身通常具有豐富視覺效果，不再只能依靠 CSS 顯示單一顏色，Color Font 常見於標題或品牌設計，與多 emoji 字體也都是使用 Color Font 的方式製作。目前常見的彩色字型格式包括：

• COLR/CPAL：OpenType 格式中的向量色盤技術，支援調色盤與圖層定義，效能高且可壓縮，目前的標準是 v1 版本。
• CBDT/CBLC：內含點陣圖的彩色字型，常用於表情符號。
• SVG-in-OpenType：可嵌入 SVG 圖層，支援更複雜的形狀與動畫，但檔案較大。
• SBIX：蘋果專用的彩色字型格式，以 PNG 為圖層呈現。

使用方式與一般字型無異，透過 font-family 載入字體，就可以呈現彩色文字。但仍要注意瀏覽器對不同格式的字體支援程度略有不同，建議以 COLR/CPAL 為主，下方範例會 @import Google Fonts 裡面的 Honk 彩色字體 ( 也可以在 HTML 裡用 link 方式載入 )，從中可以發現，使用 CSS 的 color 無法控文字顏色，因為顏色是由彩色字型的檔案定義。

• 延伸閱讀：font-family 設定字型
• 線上展示：https://codepen.io/oxxo/pen/zxGpBXz

<!-- HTML 程式碼 -->
<div>Apple</div>
<div>Banana</div>
<div>Oxxo</div>
<div>Orange</div>

<!-- CSS 程式碼 -->
<style>
  @import "https://fonts.googleapis.com/css2?family=Honk&display=swap";
  div {
    font-family: "Honk";
    font-size: 50px;
    color: red;    /* 沒有作用，因為彩色字型的色彩由自行定義 */
  }
</style>

取得 Color Font 彩色字型

• Google Fonts：https://fonts.google.com/

  Google Fonts 是 Google 提供的免費字體服務，除了可以下載字體，也可以直接使用連結線上字體連結，開啟 Google Fonts 網站後，從左側篩選器選擇「Technology > Color」，就會出現各種彩色字型。

  

  點擊想要的字型開起字型頁面，點擊右上角「Get Font」取得字型，可以使用網頁內嵌 ( Embed code ) 或下載。

  

  點擊網頁內嵌 ( Embed code )，選擇 Web 頁籤，複製網址就可以直接使用彩色字型。

  

• FONTSPACE：https://www.fontspace.com/category/color

  FONTSPACE 是一個字型網站，也有提供一些彩色字型，但都需要下載到本機環境使用，只提供線上預覽，從上方的網址開啟 FONTSPACE 網站 ( 會直接進入 color 分類 )，從下方尋找自己喜歡的彩色字型。

  

  選擇自己喜歡的字型，點擊 FREE DOWNLOAD 就可以下載字型。

  

讀取 Color Font 的色盤資訊

開始使用 Color Font 之後，接著可以透過一些工具，讀取 Color Font 的色盤資訊，才能進一步使用切換和使用這些色盤，推薦的做法有下列幾種：

• 使用 AI 協助讀取彩色字體色盤 ( ChatGPT )

  將字體上傳 ChatGPT，請 AI 分析該字體有哪些色盤 ( 目前實測 Gemini 不支援上傳字體 )，下圖是上傳 Honk 字型後的分析結果，可以看到有八個色盤

  

• 使用 wakamai fondue：https://wakamaifondue.com/

  將字體上傳到 wakamai fondue 網站，該網站就會分析這個字體有哪些色盤。

  

  網站分析彩色字型後，點擊 Color 頁籤就能看到色盤顏色，以 Honk 字型為例，由上而下總共有八個色盤。

  

使用 @font-palette-values 和 font-palette

能夠觀察彩色字型的色盤後，如果要切換顏色，需要先使用 @font-palette-values 定義彩色文字，@font-palette-values 是彩色文字專用的「規則定義」，會透過「自訂名稱」和專用的「樣式屬性」，建立特定顏色的彩色文字，自訂名稱寫法和 CSS 變數類似，使用「--」開頭的名稱，基本寫法如下：

@font-palette-values --名稱 {
  樣式屬性...
}

@font-palette-values 可以使用下列的樣式屬性：

• font-family：字型名稱。
• base-palette：彩色文字的基礎色盤編號。
• override-colors：指定要覆蓋色盤中的顏色。

透過 @font-palette-values 定義彩色文字之後，使用 font-palette 讀取定義的名稱，就能套用這種顏色的文字，下方範例會將四組相同的彩色文字，套用不同色盤的色彩 ( 注意，因為 @font-palette-values 是定義，使用時仍然需要使用 font-family )。

線上展示：https://codepen.io/oxxo/pen/Eajoyzw

<!-- HTML 程式碼 -->
<div class="a">Apple</div>
<div class="b">Banana</div>
<div class="c">Oxxo</div>
<div class="d">Orange</div>

<!-- CSS 程式碼 -->
<style>
  @import "https://fonts.googleapis.com/css2?family=Honk&display=swap";

  @font-palette-values --Honk1 {
    font-family: "Honk";
    base-palette: 1;
  }
  @font-palette-values --Honk2 {
    font-family: "Honk";
    base-palette: 2;
  }
  @font-palette-values --Honk3 {
    font-family: "Honk";
    base-palette: 3;
  }
  @font-palette-values --Honk4 {
    font-family: "Honk";
    base-palette: 4;
  }
  div {
    font-family: "Honk";  /* 使用時仍然要定義 font-family */
    font-size: 50px;
  }
  .a {font-palette: --Honk1;}
  .b {font-palette: --Honk2;}
  .c {font-palette: --Honk3;}
  .d {font-palette: --Honk4;}
</style>

使用 @font-palette-values 的 override-colors 改變顏色

如果說 base-palette 是切換色盤，override-colors 就可以覆寫指定色盤中的「特定顏色」，下圖可以看出 Honk 字體有八個色盤，每個色盤中的顏色從 2 種到 8 種不等。

下方範例在 @font-palette-values 定義中會先運用 base-palette 讀取第一個色盤，接著透過 override-colors 覆寫當中的八個顏色，就可以產生自定義的彩色文字。

線上展示：https://codepen.io/oxxo/pen/azOEZgV

<!-- HTML 程式碼 -->
<div class="a">Apple</div>

<!-- CSS 程式碼 -->
<style>
  @import "https://fonts.googleapis.com/css2?family=Honk&display=swap";

  @font-palette-values --Honk0 {
    font-family: "Honk";
    base-palette: 0;
    /* 覆寫每種顏色 */
    override-colors: 0 darkred,
      1 red, 
      2 orange, 
      3 yellow, 
      4 green, 
      5 blue, 
      6 purple, 
      7 gray
  }
  .a {
    font-family: "Honk";
    font-size: 100px;
    font-palette: --Honk0;
  }
</style>

製作彩色文字顏色變換動畫

透過控制 font-palette 的切換，就能做出彩色字型的顏色變換，下方範例會在兩種色盤之間做動畫變換，其中 --Honk0 的色盤沿用上述範例的自訂色彩。

• 延伸閱讀：CSS 動畫 animation
• 線上展示：https://codepen.io/oxxo/pen/qEdpNeo

<!-- HTML 程式碼 -->
<div class="a">Apple</div>

<!-- CSS 程式碼 -->
<style>
  @import "https://fonts.googleapis.com/css2?family=Honk&display=swap";

  @font-palette-values --Honk0 {
    font-family: "Honk";
    base-palette: 0;
    override-colors: 0 darkred,
      1 red, 
      2 orange, 
      3 yellow, 
      4 green, 
      5 blue, 
      6 purple, 
      7 gray
  }
  @font-palette-values --Honk1 {
    font-family: "Honk";
    base-palette: 1;
  }
  .a {
    font-family: "Honk";
    font-size: 100px;
    animation: oxxo 1s infinite alternate linear;
  }

  @keyframes oxxo {
    0% {font-palette: --Honk0;}
    100% {font-palette: --Honk1;}
  }
</style>

小結

Color Font 與 CSS 的整合，讓文字設計進入多彩與動態的全新時代，過 font-palette 與 @font-palette-values，就能更靈活地控制彩色字型的呈現，讓網頁在保有易讀性的同時，也更具設計感。

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～