CSSFontPaletteValuesRule: basePalette 屬性

Baseline 已廣泛支援

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

CSSFontPaletteValuesRule 介面的只讀 basePalette 屬性表示與該規則關聯的基礎調色盤。

值

一個字串，可以是以下顏色值之一

light: 匹配字型檔案中標記為適用於淺色背景的第一個調色盤，即接近白色的調色盤。如果字型中沒有調色盤，或者沒有調色盤具有必需的元資料，則該值等同於"0"，即字型中的第一個調色盤。
dark: 匹配字型檔案中標記為適用於深色背景的第一個調色盤，即接近黑色的調色盤。如果字型中沒有調色盤，或者沒有調色盤具有必需的元資料，則該值等同於"0"，即字型中的第一個調色盤。
一個包含索引的字串（如 "0"、"1"，…）: 匹配索引對應的調色盤。第一個調色盤對應"0"。

示例

讀取關聯的基礎調色盤

MDN 的即時示例基礎架構會將示例中的所有 CSS 塊合併到一個帶有 css-output ID 的內聯樣式中，因此我們首先使用 document.getElementById() 來查詢該樣式表。rules[2] 返回第一個 CSSFontPaletteValuesRule 物件，rules[3] 返回第二個。

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>
<pre id="log"></pre>

CSS

css

@import "https://fonts.googleapis.com/css2?family=Nabla&display=swap";

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

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

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

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

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

JavaScript

const log = document.getElementById("log");

const rules = document.getElementById("css-output").sheet.cssRules;
const twoRule = rules[2]; // A CSSFontPaletteValuesRule interface
const fiveRule = rules[3]; // A CSSFontPaletteValuesRule interface

log.textContent = `The ${twoRule.name} @font-palette-values base palette is: ${twoRule.basePalette}\n`;
log.textContent += `The ${fiveRule.name} @font-palette-values base palette is: ${fiveRule.basePalette}`;

結果

規範

規範
CSS 字型模組第 4 級 # dom-cssfontpalettevaluesrule-basepalette

瀏覽器相容性

另見

@font-palette-values at-rule
base-palette 描述符

幫助改進 MDN

瞭解如何貢獻

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

在 GitHub 上檢視此頁面 • 報告此內容的錯誤