CSSFontPaletteValuesRule: overrideColors 属性

基线 2022

新可用

自 2022 年 11 月起，此功能在最新的设备和浏览器版本中均可使用。此功能可能无法在较旧的设备或浏览器中使用。

overrideColors 是 CSSFontPaletteValuesRule 接口的只读属性，它是一个字符串，包含要使用的颜色索引和颜色对的列表。它的格式与相应的 override-colors 描述符相同。

值

包含以逗号分隔的颜色索引和颜色对列表的字符串

示例

读取覆盖的颜色

此示例首先定义了一些 at-规则，其中包括两个 @font-palette-values。由于这些规则位于添加到文档中的最后一个样式表中，因此调色板将是文档中最后一个样式表（document.styleSheets[document.styleSheets.length-1].cssRules）返回的第二个 CSSRule。

HTML

html

<div class="hat">
  <div class="emoji colored-hat">🎩</div>
</div>
<button>Toggle color</button>
<pre id="log"></pre>

CSS

css

@font-face {
  font-family: "Noto Color Emoji";
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/l/font?kit=Yq6P-KqIXTD0t4D9z1ESnKM3-HpFabts6diywYkdG3gjD0U&skey=a373f7129eaba270&v=v24)
    format("woff2");
}

.emoji {
  font-family: "Noto Color Emoji";
  font-size: 3rem;
}

@font-palette-values --blue {
  font-family: "Noto Color Emoji";
  override-colors:
    3 rgb(1 28 193),
    4 rgb(60 124 230);
}

@font-palette-values --green {
  font-family: "Noto Color Emoji";
  override-colors:
    3 rgb(28 193 1),
    4 rgb(34 230 1);
}

.colored-hat {
  font-palette: --blue;
}

JavaScript

const log = document.getElementById("log");
const button = document.querySelector("button");
const hat = document.querySelector(".colored-hat");
const rules = document.styleSheets[document.styleSheets.length - 1].cssRules;
const greenFontPaletteValuesRule = rules[3];
const blueFontPaletteValuesRule = rules[2];
log.textContent = `Overridden colors: ${blueFontPaletteValuesRule.overrideColors}`;

button.addEventListener("click", (event) => {
  if (hat.style.fontPalette !== "--green") {
    hat.style.fontPalette = "--green";
    log.textContent = `Overridden colors: ${greenFontPaletteValuesRule.overrideColors}`;
  } else {
    hat.style.fontPalette = "--blue";
    log.textContent = `Overridden colors: ${blueFontPaletteValuesRule.overrideColors}`;
  }
});

结果

规范

规范
CSS 字体模块级别 4 # dom-cssfontpalettevaluesrule-overridecolors

浏览器兼容性

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

另请参阅

@font-palette-values at-规则
override-colors 描述符