CSSFontFeatureValuesRule

Instanzeigenschaften

Erbt Eigenschaften von der übergeordneten Schnittstelle CSSRule.

CSSFontFeatureValuesRule.annotation Schreibgeschützt

Eine benutzerdefinierte Wertdefinition und ein Wert, die eine alternative Annotation der Schriftart anwenden.

CSSFontFeatureValuesRule.characterVariant Schreibgeschützt

Eine benutzerdefinierte Wertdefinition und ein Wert, die stilistische Alternativen für Zeichen der Schriftart anwenden.

CSSFontFeatureValuesRule.fontFamily

Eine Zeichenfolge, die die Schriftfamilie angibt, für die diese Regel gilt.

CSSFontFeatureValuesRule.ornaments Schreibgeschützt

Eine benutzerdefinierte Wertdefinition und ein Wert, die alternative Ornamente der Schriftart anwenden.

CSSFontFeatureValuesRule.styleset Schreibgeschützt

Eine benutzerdefinierte Wertdefinition und ein Wert, die alternative Stilsätze der Schriftart anwenden.

CSSFontFeatureValuesRule.stylistic Schreibgeschützt

Eine benutzerdefinierte Wertdefinition und ein Wert, die alternative Glyphen der Schriftart anwenden.

CSSFontFeatureValuesRule.swash Schreibgeschützt

Eine benutzerdefinierte Wertdefinition und ein Wert, die alternative Schwungformen der Schriftart anwenden.

Instanzmethoden

Erbt Methoden von der übergeordneten Schnittstelle CSSRule.

Beispiele

Schriftfamilie auslesen

In diesem Beispiel deklarieren wir zwei @font-feature-values-Regeln: eine für die Schriftfamilie Font One und eine für Font Two. In beiden Deklarationen legen wir fest, dass der Name „nice-style“ die alternativen Glyphen eines Stilsatzes für beide Schriftarten repräsentiert. Dazu geben wir jeweils den Index dieser Alternative in der betreffenden Schriftfamilie an. Die alternativen Glyphen werden dann mithilfe von font-variant-alternates auf alle Elemente mit der Klasse .nice-look angewendet, indem der Name an die Funktion styleset() übergeben wird.

Anschließend lesen wir diese Deklarationen über das CSSOM als CSSFontFeatureValuesRule-Instanzen aus und geben sie im Log aus.

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

Browser-Kompatibilität

Siehe auch

• @font-feature-values