Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.
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
@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
JavaScript aktivieren, um diese Browser-Kompatibilitätstabelle anzuzeigen.