使用 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
• 制作彩色文字颜色变换动画

教学影片

搭配教学影片一起阅读，效果会更好！欢迎大家订阅 STEAM 教育学习网的 Youtube 频道。

前往：https://www.youtube.com/@steam.oxxostudio

认识 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，就能更灵活地控制彩色字型的呈现，让网页在保有易读性的同时，也更具设计感。

意见反馈