CSSFontPaletteValuesRule

Erbt Eigenschaften von ihrem Vorfahren CSSRule.

CSSFontPaletteValuesRule.name Nur lesbar

Ein String mit dem Namen der Schriftartpalette.

CSSFontPaletteValuesRule.fontFamily Nur lesbar

Ein String, der die Schriftarten angibt, auf die die Regel angewendet werden muss.

CSSFontPaletteValuesRule.basePalette Nur lesbar

Ein String, der die mit der Regel assoziierte Basis-Palette angibt.

CSSFontPaletteValuesRule.overrideColors Nur lesbar

Ein String, der die Farben der Basis-Palette angibt, die überschrieben werden und die neuen Farben.

Erbt Methoden von ihrem Vorfahren CSSRule.

Dieses Beispiel definiert zuerst eine @import und eine @font-palette-values At-Regel. Dann wird die @font-palette-values Regel gelesen und ihr Name angezeigt. Da diese Regeln im letzten ins Dokument hinzugefügten Stylesheet leben, ist die Palette die zweite CSSRule, die vom letzten Stylesheet im Dokument zurückgegeben wird (document.styleSheets[document.styleSheets.length-1].cssRules). Daher gibt rules[1] ein CSSFontPaletteValuesRule-Objekt zurück, aus dem wir auf fontFamily zugreifen können.

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}`;

Ergebnis

• @font-palette-values