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 上查看此页面 • 报告此内容的错误