CSSFontFeatureValuesMap

Instanzen-Eigenschaften

CSSFontFeatureValuesMap.size

Gibt eine positive Ganzzahl zurück, die die Größe des CSSFontFeatureValuesMap-Objekts enthält.

Instanz-Methoden

CSSFontFeatureValuesMap.clear()

Entfernt alle Deklarationen in der CSSFontFeatureValuesMap.

CSSFontFeatureValuesMap.delete()

Entfernt die CSS-Deklaration mit der angegebenen Eigenschaft in der CSSFontFeatureValuesMap.

CSSFontFeatureValuesMap.entries()

Gibt ein neues Map-Iterator-Objekt zurück, das die [key, value]-Paare für jede Deklaration in dieser CSSFontFeatureValuesMap in Einfügereihenfolge enthält.

CSSFontFeatureValuesMap.forEach()

Führt eine bereitgestellte Funktion einmal pro Schlüssel/Wert-Paar in dieser CSSFontFeatureValuesMap in Einfügereihenfolge aus.

CSSFontFeatureValuesMap.get()

Gibt den Wert zurück, der dem Schlüssel in dieser CSSFontFeatureValuesMap entspricht, oder undefined, wenn kein solcher Wert existiert.

CSSFontFeatureValuesMap.has()

Gibt einen booleschen Wert zurück, der anzeigt, ob ein Eintrag mit dem angegebenen Schlüssel in dieser CSSFontFeatureValuesMap existiert oder nicht.

CSSFontFeatureValuesMap.keys()

Gibt ein neues Map-Iterator-Objekt zurück, das die key für jede Deklaration in dieser CSSFontFeatureValuesMap in Einfügereihenfolge enthält.

CSSFontFeatureValuesMap.set()

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

CSSFontFeatureValuesMap.values()

Gibt ein neues Map-Iterator-Objekt zurück, das die value für jede Deklaration in dieser CSSFontFeatureValuesMap in Einfügereihenfolge enthält.

CSSFontFeatureValuesMap.[Symbol.iterator]()

Gibt das Iterator-Objekt selbst zurück. Dies ermöglicht es auch, dass Iteratoren iterierbar sind.

Beispiele

Benutzerdefinierte Namen protokollieren

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

CSS

Zuerst deklarieren wir ein @font-feature-values für die Font One-Schriftfamilie. Dies schließt die Deklaration der Namen "nice-style" und "odd-style" ein, die verwendet werden können, um die styleset-alternativen Glyphen für Font One zu repräsentieren und die Indexwerte für diese Alternativen anzugeben. Es schließt auch die Deklaration des Namens "swishy" ein, der verwendet werden kann, um die swash-alternativen Glyphen für Font One zu repräsentieren und den Index für diese Alternative anzugeben.

Die "nice-style"-alternativen Glyphen werden dann für jede .nice-look-Klasse angewendet, indem die font-variant-alternates-Eigenschaft verwendet wird und der Name an die styleset()-Funktion übergeben wird. Das gleiche wird für den Namen "swishy" für die swash-alternativen Glyphen getan, die dann an die swash()-Funktion übergeben werden. Die "odd-style"-Glyphen werden nicht verwendet (sie werden nur hinzugefügt, um zu demonstrieren, dass mehrere Werte in der Map definiert werden 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 id="log"></pre>

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

JavaScript

Der unten stehende Code findet die entsprechende CSSFontFeatureValuesRule für die oben hinzugefügte CSS @font-feature-values-At-Regel. Er durchläuft dann die Werte der styleset- und swash-Eigenschaften, die durch CSSFontFeatureValuesMap-Instanzen repräsentiert werden, unter Verwendung der forEach()-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 CSSFontFeatureValuesRule
if (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