CSSFontPaletteValuesRule: basePalette 属性

基线 2022

新功能

自 2022 年 11 月起，此功能可在最新的设备和浏览器版本上运行。此功能可能无法在旧设备或浏览器上运行。

CSSFontPaletteValuesRule 接口的只读 basePalette 属性指示与规则关联的基调色板。

值

可以是以下颜色值之一的字符串

light

匹配字体文件中标记为适用于浅色背景（即接近白色）的第一个调色板。如果字体中没有调色板，或没有调色板具有所需的元数据，则该值等效于"0"，即字体中的第一个调色板。

dark

匹配字体文件中标记为适用于深色背景（即接近黑色）的第一个调色板。如果字体中没有调色板，或没有调色板具有所需的元数据，则该值等效于"0"，即字体中的第一个调色板。

包含索引的字符串（如"0"、"1"、…)

匹配与索引相对应的调色板。第一个调色板对应于"0"。

示例

读取关联的基调色板

此示例在添加到文档的额外样式表中添加规则，这些规则作为文档中的最后一个样式表返回（document.styleSheets[document.styleSheets.length-1].cssRules）。因此，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 url("https://fonts.googleapis.com/css2?family=Nabla&display=swap");

h2 {
  font-family: "Nabla";
}

@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

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

const rules = document.styleSheets[document.styleSheets.length - 1].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 Fonts 模块 Level 4
# dom-cssfontpalettevaluesrule-basepalette

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅