CSSFontPaletteValuesRule: fontFamily-Eigenschaft

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

Die schreibgeschützte fontFamily-Eigenschaft des CSSFontPaletteValuesRule-Interfaces listet die Schriftfamilien auf, auf die die Regel angewendet werden kann. Die Schriftfamilien müssen benannte Familien sein; generische Familien wie courier sind nicht gültig.

Wert

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

Beispiele

Die zugehörige Schriftfamilie lesen

Dieses Beispiel definiert zunächst ein @import und eine @font-palette-values at-Regel. Dann wird die @font-palette-values-Regel gelesen und ihr Name angezeigt. Da diese Regeln im zuletzt zum Dokument hinzugefügten Stylesheet enthalten sind, wird die Palette die zweite CSSRule sein, die vom letzten Stylesheet im Dokument zurückgegeben wird (document.styleSheets[document.styleSheets.length-1].cssRules). Daher 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's applies to the 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.styleSheets[document.styleSheets.length - 1].cssRules;
const fontPaletteValuesRule = rules[1]; // a CSSFontPaletteValuesRule interface
log.textContent += ` ${fontPaletteValuesRule.fontFamily}`;

Ergebnis

Spezifikationen

Specification
CSS Fonts Module Level 4 # dom-cssfontpalettevaluesrule-fontfamily

Browser-Kompatibilität

Siehe auch

@font-palette-values at-Regel
font-family Deskriptor

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden