CSSFontFeatureValuesRule

Baseline 2025 *

Newly available

Since March 2025, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Some parts of this feature may have varying levels of support.

Die CSSFontFeatureValuesRule Schnittstelle repräsentiert eine @font-feature-values At-Regel. Die Werte ihrer Instanzeigenschaften können über die CSSFontFeatureValuesMap Schnittstelle abgerufen werden.

@font-feature-values ermöglicht es Entwicklern, einem gegebenen Schriftschnitt einen lesbaren Namen mit einem numerischen Index zuzuordnen, der ein bestimmtes OpenType-Schriftmerkmal steuert. Für Merkmale, die alternative Glyphen auswählen (stilistisch, Styleset, Zeichenvariante, Swash, Ornament oder Annotation), kann die Eigenschaft font-variant-alternates dann auf den lesbaren Namen verweisen, um das zugehörige Merkmal anzuwenden. Dies ist praktisch, da dadurch derselbe Name verwendet werden kann, um eine Sammlung alternativer Glyphen über mehrere Schriftarten hinweg zu repräsentieren.

Instanzeigenschaften

Erbt Eigenschaften von seinem Vorgänger CSSRule.

CSSFontFeatureValuesRule.annotation Experimentell: Eine vom Benutzer definierte Wertdefinition und ein Wert, der eine alternative Annotation der Schriftart anwendet.
CSSFontFeatureValuesRule.characterVariant Experimentell: Eine vom Benutzer definierte Wertdefinition und ein Wert, der stilistische Alternativen für Zeichen der Schriftart anwendet.
CSSFontFeatureValuesRule.fontFamily: Ein String, der die Schriftfamilie identifiziert, auf die diese Regel angewendet wird.
CSSFontFeatureValuesRule.ornaments Experimentell: Eine vom Benutzer definierte Wertdefinition und ein Wert, der alternative Ornamente der Schriftart anwendet.
CSSFontFeatureValuesRule.styleset Experimentell: Eine vom Benutzer definierte Wertdefinition und ein Wert, der alternative Stilsets der Schriftart anwendet.
CSSFontFeatureValuesRule.stylistic Experimentell: Eine vom Benutzer definierte Wertdefinition und ein Wert, der alternative Glyphen der Schriftart anwendet.
CSSFontFeatureValuesRule.swash Experimentell: Eine vom Benutzer definierte Wertdefinition und ein Wert, der alternative Swashes der Schriftart anwendet.

Instanzmethoden

Erbt Methoden von seinem Vorgänger CSSRule.

Beispiele

Schriftfamilie lesen

In diesem Beispiel deklarieren wir zwei @font-feature-values, einen für die Schriftfamilie Font One und einen für Font Two. In beiden Deklarationen definieren wir, dass der Name "nice-style" verwendet werden kann, um die Styleset-Alternate-Glyphen für beide Schriftarten darzustellen, wobei der Index für dieses Alternate in jeder Schriftfamilie angegeben wird. Die alternativen Glyphen werden dann für jede .nice-look Klasse angewendet, indem font-variant-alternates verwendet und der Name an die styleset() Funktion übergeben wird.

Wir verwenden dann das CSSOM, um diese Deklarationen als CSSFontFeatureValuesRule Instanzen zu lesen und sie in das Log auszugeben.

CSS

css

/* At-rule for "nice-style" in Font One */
@font-feature-values Font One {
  @styleset {
    nice-style: 12; /* name used to represent the alternate set of glyphs at index 12 */
  }
}

/* At-rule for "nice-style" in Font Two */
@font-feature-values Font Two {
  @styleset {
    nice-style: 4;
  }
}

/* Apply the at-rules with a single declaration */
.nice-look {
  font-variant-alternates: styleset(
    nice-style
  ); /* name selects different index for same alternate in different fonts */
}

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

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

JavaScript

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

const rules = document.getElementById("css-output").sheet.cssRules;

const fontOne = rules[0]; // A CSSFontFeatureValuesRule
log(`The 1st '@font-feature-values' family: "${fontOne.fontFamily}".`);

const fontTwo = rules[1]; // Another CSSFontFeatureValuesRule
log(`The 2nd '@font-feature-values' family: "${fontTwo.fontFamily}"`);

Spezifikationen

Specification
CSS Fonts Module Level 4 # cssfontfeaturevaluesrule

Browser-Kompatibilität

Siehe auch

@font-feature-values

Help improve MDN

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

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