DasCSSFontFeatureValuesMap-Interface desCSS Object Model (CSSOM) stellt eine durchlaufbare und schreibgeschützte Menge derCSSFontFeatureValuesRule-Eigenschaften dar, wie z.B.swash,annotation,ornaments, usw.

Eine Instanz vonCSSFontFeatureValuesMap ist ein schreibgeschütztesMap-ähnliches Objekt, in dem jeder Schlüssel der benutzerdefinierte Name ist, der verwendet wird, um ein Schriftmerkmal zu referenzieren, und der entsprechende Wert der Index für das Schriftmerkmal innerhalb der Schriftart ist.

Instanz-Eigenschaften

CSSFontFeatureValuesMap.size

Gibt eine positive ganze Zahl zurück, die die Größe desCSSFontFeatureValuesMap-Objekts enthält.

Instanz-Methoden

CSSFontFeatureValuesMap.clear()

Entfernt alle Deklarationen imCSSFontFeatureValuesMap.

CSSFontFeatureValuesMap.delete()

Entfernt die CSS-Deklaration mit der angegebenen Eigenschaft imCSSFontFeatureValuesMap.

CSSFontFeatureValuesMap.entries()

Gibt ein neuesMap-Iterator-Objekt zurück, das die[Schlüssel, Wert]-Paare für jede Deklaration in diesemCSSFontFeatureValuesMap in Einfüge-Reihenfolge enthält.

CSSFontFeatureValuesMap.forEach()

Führt eine bereitgestellte Funktion einmal pro Schlüssel/Wert-Paar in diesemCSSFontFeatureValuesMap in Einfüge-Reihenfolge aus.

CSSFontFeatureValuesMap.get()

Gibt den Wert zurück, der dem Schlüssel in diesemCSSFontFeatureValuesMap entspricht, oderundefined, wenn keiner vorhanden ist.

CSSFontFeatureValuesMap.has()

Gibt einen Boolean zurück, der anzeigt, ob ein Eintrag mit dem angegebenen Schlüssel in diesemCSSFontFeatureValuesMap existiert oder nicht.

CSSFontFeatureValuesMap.keys()

Gibt ein neuesMap-Iterator-Objekt zurück, das denSchlüssel für jede Deklaration in diesemCSSFontFeatureValuesMap in Einfüge-Reihenfolge enthält.

CSSFontFeatureValuesMap.set()

Fügt einen neuen Eintrag mit einem angegebenen Schlüssel und Wert zu diesemCSSFontFeatureValuesMap hinzu oder aktualisiert einen vorhandenen Eintrag, wenn der Schlüssel bereits existiert.

CSSFontFeatureValuesMap.values()

Gibt ein neuesMap-Iterator-Objekt zurück, das denWert für jede Deklaration in diesemCSSFontFeatureValuesMap in Einfüge-Reihenfolge enthält.

CSSFontFeatureValuesMap.[Symbol.iterator]()

Gibt das Iterator-Objekt selbst zurück. Dies erlaubt es, dass Iterator-Objekte auch durchlaufbar sind.

Beispiele

Benutzerdefinierte Namen protokollieren

Dieses Beispiel zeigt, wie Sie die benutzerdefinierten Namen (und deren zugeordnete Indizes), die in einemCSSFontFeatureValuesMap gespeichert sind, protokollieren können (für bestimmteCSSFontFeatureValuesRule-Eigenschaften).

CSS

Zuerst deklarieren wir ein@font-feature-values für die SchriftfamilieFont One.Dies beinhaltet die Deklaration der Namen "nice-style" und "odd-style", die verwendet werden können, um diestyleset-alternativen Glyphen fürFont One zu repräsentieren und die Indexwerte für diese Alternativen zu spezifizieren.Es beinhaltet auch die Deklaration des Namens "swishy", der verwendet werden kann, um dieswash-alternativen Glyphen fürFont One zu repräsentieren und den Index für diese Alternative zu spezifizieren.

Die "nice-style"-alternativen Glyphen werden dann für jede.nice-look-Klasse angewendet, indem diefont-variant-alternates-Eigenschaft verwendet wird und der Name an diestyleset()-Funktion übergeben wird.Dieselbe Vorgehensweise gilt für den Namen "swishy" für dieswash-alternativen Glyphen, die dann an dieswash()-Funktion übergeben wird.Die "odd-style"-Glyphen werden nicht verwendet (sie werden nur hinzugefügt, um zu demonstrieren, dass mehrere Werte in der Karte definiert sein können).

/* At-rule for "nice-style", "odd-style", and "swishy" in Font One */@font-feature-values Font One {  @styleset {    nice-style: 12; /* name used to represent the alternate set of glyphs at index 12 */    odd-style: 10; /* name used to represent the alternate set of glyphs at index 10 */  }  @swash {    swishy: 1; /* name used to represent the alternate set of glyphs at index 1 */  }}/* Apply the at-rules to the appropriate selectors */.nice-look {  font-variant-alternates: styleset(nice-style);}.swoosh {  font-variant-alternates: swash(swishy);}

<pre></pre>

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

JavaScript

Der untenstehende Code findet die entsprechendeCSSFontFeatureValuesRule für die oben hinzugefügte CSS-@font-feature-values-Regel.Dann iteriert er die Werte derstyleset- undswash-Eigenschaften, die durchCSSFontFeatureValuesMap-Instanzen repräsentiert werden, unter Verwendung derforEach()-Methode.In jedem Schritt protokolliert er die benutzerdefinierten Namen und Indexwerte.

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

const rules = document.querySelector("#css-output").sheet.cssRules;const fontOne = rules[0]; // A CSSFontFeatureValuesRuleif (fontOne.styleset) {  // styleset property is supported  log(    "The user has defined the following name(s)/index(s) for CSSFontFeatureValuesRule.styleset:",  );  fontOne.styleset.forEach((value, key) => log(` ${key} : ${value}`));} else {  log("Browser does not support CSSFontFeatureValuesMap.styleset property.");}if (fontOne.swash) {  log(    "The user has defined the following name(s)/index(s) for CSSFontFeatureValuesRule.swash:",  );  fontOne.swash.forEach((value, key) => log(` ${key} : ${value}`));} else {  log("Browser does not support CSSFontFeatureValuesMap.swash property.");}

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

• @font-feature-values