CSSFontFaceRule: style-Eigenschaft

Baseline Weitgehend verfügbar

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

Die schreibgeschützte style-Eigenschaft des CSSFontFaceRule-Interfaces gibt ein CSSFontFaceDescriptors-Objekt zurück, das die im Körper der @font-face-Regel verfügbaren Deskriptoren darstellt.

Wert

Ein CSSFontFaceDescriptors-Objekt.

Obwohl die style-Eigenschaft selbst schreibgeschützt ist, da Sie das CSSFontFaceDescriptors-Objekt nicht ersetzen können, können Sie dennoch direkt der style-Eigenschaft zuweisen, was gleichbedeutend mit der Zuweisung zu ihrer cssText-Eigenschaft ist. Sie können das CSSFontFaceDescriptors-Objekt auch mit den Methoden setProperty() und removeProperty() modifizieren.

Beispiele

Grundlegende Verwendung

Dieses Beispiel definiert eine @font-face-Regel und verwendet dann CSSFontFaceDescriptors, um die Deskriptorwerte auszulesen.

CSS

css

@font-face {
  font-family: "MyHelvetica";
  src:
    local("Helvetica Neue Bold"),
    local("HelveticaNeue-Bold"),
    url("MgOpenModernaBold.woff2") format("woff2");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

#log {
  height: 200px;
  overflow: scroll;
  padding: 0.5rem;
  border: 1px solid black;
}

<pre id="log"></pre>

const logElement = document.querySelector("#log");
function log(text) {
  logElement.innerText = `${logElement.innerText}${text}\n`;
  logElement.scrollTop = logElement.scrollHeight;
}

JavaScript

const myRules = document.getElementById("css-output").sheet.cssRules;
for (const rule of myRules) {
  if (rule instanceof CSSFontFaceRule) {
    const descriptors = rule.style;
    if (descriptors instanceof CSSStyleDeclaration) {
      log(`rule.style is a CSSStyleDeclaration.`);
    } else {
      log(`rule.style is a CSSFontFaceDescriptors.`);
    }
    log("Descriptors:");
    log(` font-family: ${descriptors.fontFamily}`);
    log(` src: ${descriptors.src}`);
    log(` font-weight: ${descriptors["font-weight"]}`);
    log(` font-style: ${descriptors.fontStyle}`);
    log(` font-display: ${descriptors["font-display"]}`);
  }
}

Ergebnis

Spezifikationen

Spezifikation
CSS Fonts Module Level 4 # dom-cssfontfacerule-style

Browser-Kompatibilität

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

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