CSSFontFaceDescriptors

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Das CSSFontFaceDescriptors-Interface repräsentiert einen CSS-Deklarationsblock für eine @font-face-@-Regel.

Jeder Deskriptor im Körper der entsprechenden @font-face-@-Regel kann entweder über seinen Kebab-Case-Eigenschaftsnamen in der Bracket-Notation oder die Camel-Case-Version des Eigenschaftsnamens in der Dot-Notation zugegriffen werden. Zum Beispiel können Sie auf den font-family-CSS-Deskriptor als style["font-family"] oder style.fontFamily zugreifen, wobei style eine Instanz von CSSFontFaceDescriptors ist.

Hinweis: Die CSSFontFaceRule-Schnittstelle repräsentiert eine @font-face-@-Regel, und die CSSFontFaceRule.style-Eigenschaft ist eine Instanz dieses Objekts.

Instanz-Eigenschaften

Erbt Eigenschaften von seinem Vorfahren CSSStyleDeclaration.

Die folgenden Eigenschaftsnamen in Kebab-Case (zugänglich über die Bracket-Notation) und Camel-Case (zugänglich über die Dot-Notation) stellen jeweils den Wert eines Deskriptors in der entsprechenden @font-face-@-Regel dar:

font-display oder fontDisplay Experimentell: Ein String, der den Wert des font-display-Deskriptors repräsentiert.
font-family oder fontFamily Experimentell: Ein String, der den Wert des font-family-Deskriptors repräsentiert.
font-feature-settings oder fontFeatureSettings Experimentell: Ein String, der den Wert des font-feature-settings-Deskriptors repräsentiert.
font-stretch oder fontStretch Experimentell: Ein String, der den Wert des font-stretch-Deskriptors repräsentiert.
font-style oder fontStyle Experimentell: Ein String, der den Wert des font-style-Deskriptors repräsentiert.
font-weight oder fontWeight Experimentell: Ein String, der den Wert des font-weight-Deskriptors repräsentiert.
font-width oder fontWidth Experimentell: Ein String, der den Wert des font-width-Deskriptors repräsentiert.
size-adjust oder sizeAdjust Experimentell: Ein String, der den Wert des size-adjust-Deskriptors repräsentiert.
src Experimentell: Ein String, der den Wert des src-Deskriptors repräsentiert.
unicode-range oder unicodeRange Experimentell: Ein String, der den Wert des unicode-range-Deskriptors repräsentiert.

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 style = rule.style; // a CSSFontFaceDescriptors
    log(`font-family: ${style.fontFamily}`);
    log(`src: ${style.src}`);
    log(`font-weight: ${style["font-weight"]}`);
    log(`font-style: ${style.fontStyle}`);
    log(`font-display: ${style["font-display"]}`);
  }
}