CSSFontPaletteValuesRule

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨November 2022⁩.

Das CSSFontPaletteValuesRule-Interface repräsentiert eine @font-palette-values At-Regel.

Instanz-Eigenschaften

Erbt Eigenschaften von seinem Vorfahren CSSRule.

CSSFontPaletteValuesRule.name Schreibgeschützt: Ein String mit dem Namen der Schriftart-Palette.
CSSFontPaletteValuesRule.fontFamily Schreibgeschützt: Ein String, der die Schriftarten angibt, auf die die Regel angewendet werden muss.
CSSFontPaletteValuesRule.basePalette Schreibgeschützt: Ein String, der die mit der Regel verknüpfte Basis-Palette angibt.
CSSFontPaletteValuesRule.overrideColors Schreibgeschützt: Ein String, der die überschriebenen Farben der Basis-Palette und die neuen Farben angibt.

Instanz-Methoden

Erbt Methoden von seinem Vorfahren CSSRule.

Dieses Beispiel definiert zuerst eine @import und eine @font-palette-values At-Regel. Dann liest es die @font-palette-values Regel und zeigt ihren Namen an. Die MDN Live-Sample-Infrastruktur kombiniert alle CSS-Blöcke im Beispiel zu einem einzigen Inline-Stil mit der ID css-output, daher verwenden wir zuerst document.getElementById(), um dieses Stylesheet zu finden. Die Palette wird die zweite CSSRule in diesem Stylesheet sein. Daher gibt rules[1] ein CSSFontPaletteValuesRule-Objekt zurück, aus dem wir fontFamily abrufen können.

HTML

html

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

CSS

css

@import "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.getElementById("css-output").sheet.cssRules;
const fontPaletteValuesRule = rules[1]; // aA CSSFontPaletteValuesRule interface
log.textContent += ` ${fontPaletteValuesRule.fontFamily}`;