CSSFontPaletteValuesRule: Eigenschaft fontFamily

Wert

Ein String, der eine durch Leerzeichen getrennte Liste der Schriftarten enthält, auf die die Regel angewendet werden kann.

Beispiele

Zugehörige Schriftfamilie auslesen

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-Beispiel-Infrastruktur kombiniert alle CSS-Blöcke im Beispiel zu einem einzigen Inline-Style mit der ID css-output, daher verwenden wir zuerst document.getElementById(), um dieses Blatt zu finden. Die Palette wird die zweite CSSRule in diesem Stylesheet sein. Daher gibt rules[1] ein CSSFontPaletteValuesRule-Objekt zurück, von dem wir auf fontFamily zugreifen können.

HTML

<pre id="log">
The @font-palette-values at-rule's applies to the font families:</pre
>

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]; // a CSSFontPaletteValuesRule interface
log.textContent += ` ${fontPaletteValuesRule.fontFamily}`;

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

• @font-palette-values At-Regel
• font-family Deskriptor