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.

Instanzeigenschaften

Erbt Eigenschaften von seinem Vorfahren CSSRule.

CSSFontPaletteValuesRule.name Schreibgeschützt: Ein String mit dem Namen der Schriftartenpalette.
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, und die neuen Farben.

Instanzmethoden

Erbt Methoden von seinem Vorfahren CSSRule.

Dieses Beispiel definiert zunächst 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-Beispiel-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. Also gibt rules[1] ein CSSFontPaletteValuesRule-Objekt zurück, aus dem 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}`;