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-rule.

Instanz-Eigenschaften

Erbt Eigenschaften von seinem Vorfahren CSSRule.

CSSFontPaletteValuesRule.name Schreibgeschützt: Ein String mit dem Namen der Schriftarten-Palette.
CSSFontPaletteValuesRule.fontFamily Schreibgeschützt: Ein String, der die Schriftfamilien angibt, auf die die Regel angewendet werden muss.
CSSFontPaletteValuesRule.basePalette Schreibgeschützt: Ein String, der die mit der Regel verbundene Basis-Palette angibt.
CSSFontPaletteValuesRule.overrideColors Schreibgeschützt: Ein String, der die Farben der Basis-Palette angibt, die überschrieben werden, sowie die neuen Farben.

Instanz-Methoden

Erbt Methoden von seinem Vorfahren CSSRule.

Dieses Beispiel definiert zuerst eine @import und eine @font-palette-values at-rule. Anschließend wird die @font-palette-values-Regel ausgelesen und ihr Name angezeigt. Die Live-Beispiel-Infrastruktur von MDN kombiniert alle CSS-Blöcke im Beispiel zu einem einzigen Inline-Stil mit der ID css-output, daher verwenden wir zunächst 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, über das wir auf fontFamily zugreifen 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}`;