CSSFontPaletteValuesRule

Интерфейс CSSFontPaletteValuesRule представляет собой правило @font-palette-values at-rule.

Наследует свойства от своего предка CSSRule.

CSSFontPaletteValuesRule.name Только для чтения

Строка с именем палитры шрифтов.

CSSFontPaletteValuesRule.fontFamily Только для чтения

Строка, указывающая семейства шрифтов, к которым должно применяться правило.

CSSFontPaletteValuesRule.basePalette Только для чтения

Строка, указывающая базу палитры, связанную с правилом.

CSSFontPaletteValuesRule.overrideColors Только для чтения

Строка, указывающая цвета базовой палитры, которые перезаписываются, и новые цвета.

Наследует методы от своего предка CSSRule.

В этом примере сначала определяется @import и @font-palette-values at-rule. Затем он считывает правило @font-palette-values и отображает его имя. Поскольку эти правила находятся в последнем добавленном в документ стиле, палитра будет вторым CSSRule, возвращаемым последним стилем в документе (document.styleSheets[document.styleSheets.length-1].cssRules). Таким образом, rules[1] возвращает объект CSSFontPaletteValuesRule, из которого мы можем получить доступ к fontFamily.

HTML

<pre id="log">The @font-palette-values at-rule font families:</pre>

CSS

@import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);

@font-palette-values --Alternate {
  font-family: "Bungee Spice";
  override-colors:
    0 #00ffbb,
    1 #007744;
}

.alternate {
  font-palette: --Alternate;
}

JavaScript

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

const rules = document.styleSheets[document.styleSheets.length - 1].cssRules;
const fontPaletteValuesRule = rules[1]; // aA CSSFontPaletteValuesRule interface
log.textContent += ` ${fontPaletteValuesRule.fontFamily}`;

Результат

• @font-palette-values