CSSFontPaletteValuesRule

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit November 2022 browserübergreifend verfügbar.

Mehr erfahren
Vollständige Kompatibilität anzeigen

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