@font-palette-values

Baseline 已廣泛支援

此功能已成熟，可跨多種裝置和瀏覽器版本使用。自 ⁨2022 年 11 月⁩起，所有瀏覽器均支援此功能。

@font-palette-values CSS @規則允許您自定義字體制造商建立的 font-palette 的預設值。

語法

css

@font-palette-values --identifier {
  font-family: "Bixa";
}
.my-class {
  font-palette: --identifier;
}

<dashed-ident> 是使用者定義的識別符號，雖然它看起來像 CSS 自定義屬性，但其行為方式不同，並且不封裝在 CSS var() 函式中。

描述符

base-palette: 指定要使用的由字體制造商建立的 base-palette 的名稱或索引。
font-family: 指定此調色盤可應用於的字型家族名稱。@font-palette-values 規則需要 font-family 名稱才能有效。
override-colors: 指定要覆蓋的基本調色盤中的顏色。

正式語法

@font-palette-values = 
  @font-palette-values <dashed-ident> { <declaration-list> }

示例

覆蓋現有調色盤中的顏色

此示例展示瞭如何更改彩色字型中的部分或全部顏色。

HTML

html

<p>default colors</p>
<p class="alternate">alternate colors</p>

CSS

css

@import "https://fonts.googleapis.com/css2?family=Bungee+Spice";
p {
  font-family: "Bungee Spice", fantasy;
  font-size: 2rem;
}
@font-palette-values --Alternate {
  font-family: "Bungee Spice";
  override-colors:
    0 #00ffbb,
    1 #007744;
}
.alternate {
  font-palette: --Alternate;
}

結果

當覆蓋索引 0 處的正常或基本調色盤的顏色時，您無需宣告要使用的基本調色盤。這隻應在覆蓋不同的基本調色盤時進行。如果您正在覆蓋所有顏色，則也無需指定要使用的基本調色盤。

規範

規範
CSS 字型模組第 4 級 # at-ruledef-font-palette-values

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

此頁面由 MDN 貢獻者最後修改於 2025 年 10 月 13 日。

在 GitHub 上檢視此頁面 • 報告此內容的問題