base-palette

Baseline 已廣泛支援

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

base-palette CSS 描述符用於指定預定義調色盤的名稱或索引，以用於建立新調色盤。如果指定的 base-palette 不存在，則將使用索引為 0 的調色盤。

語法

css

@font-palette-values --one {
  base-palette: 1;
}

base-palette 描述符使用字體制造商建立的調色盤的零基索引來指定。

值

<index>: 指定要使用的預定義調色盤的索引。

正式定義

相關的 at-rule	`@font-palette-values`
初始值	`n/a（必需）`
計算值	同指定值

正式語法

base-palette = 
  light            |
  dark             |
  <integer [0,∞]>

示例

更改字型中的預設調色盤

使用 Rocher Color Font，此示例顯示了兩次將字型中的預設調色盤切換到字體制造商建立的備用調色盤。

HTML

html

<h2>default base-palette</h2>
<h2 class="two">base-palette at index 2</h2>
<h2 class="five">base-palette at index 5</h2>

CSS

css

@font-face {
  font-family: "Rocher";
  src: url("[path-to-font]/RocherColorGX.woff2") format("woff2");
}

h2 {
  font-family: "Rocher", fantasy;
}

@font-palette-values --two {
  font-family: "Rocher";
  base-palette: 2;
}

@font-palette-values --five {
  font-family: "Rocher";
  base-palette: 5;
}

.two {
  font-palette: --two;
}

.five {
  font-palette: --five;
}

結果

Example showing 3 different base-palettes of Rocher color font

規範

規範
CSS 字型模組第 4 級 # base-palette-desc

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

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

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