CSSFontFeatureValuesMap - Web-APIs | MDN

Seitenleiste umschalten

Farbschema

Systemeinstellung
Hell
Dunkel

Deutsch

Sprache merken Mehr erfahren

CSSFontFeatureValuesMap

Eingeschränkt verfügbar

Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Die CSSFontFeatureValuesMap Schnittstelle des CSS Object Model (CSSOM) repräsentiert eine iterierbare und schreibgeschützte Menge von CSSFontFeatureValuesRule Eigenschaften, wie zum Beispiel swash, annotation, ornaments und andere.

Eine CSSFontFeatureValuesMap Instanz ist ein schreibgeschütztes Map-ähnliches Objekt, bei dem jeder Schlüssel der benutzerdefinierte Name ist, der verwendet wird, um auf eine Schrifteigenschaft zu verweisen, und der entsprechende Wert ist der Index für die Schrifteigenschaft innerhalb der Schriftart.

In diesem Artikel

Instanz-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ügungsreihenfolge enthält.

CSSFontFeatureValuesMap.forEach()

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

CSSFontFeatureValuesMap.get()

Gibt den Wert zurück, der dem Schlüssel in dieser CSSFontFeatureValuesMap entspricht, oder undefined, wenn keiner vorhanden ist.

CSSFontFeatureValuesMap.has()

Gibt einen boolean zurück, der angibt, 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 den key für jede Deklaration in dieser CSSFontFeatureValuesMap in Einfügungsreihenfolge enthält.

CSSFontFeatureValuesMap.set()

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

CSSFontFeatureValuesMap.values()

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

CSSFontFeatureValuesMap.[Symbol.iterator]()

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

Beispiele

Benutzerdefinierte Namen protokollieren

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

CSS

Zuerst deklarieren wir ein @font-feature-values für die Schriftfamilie Font One. Dies umfasst die Deklaration der Namen "nice-style" und "odd-style", 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 umfasst auch die Deklaration des Namens "swishy", der verwendet werden kann, um die alternativen swash 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 Eigenschaft font-variant-alternates verwendet und der Name an die styleset() Funktion übergeben wird. Das gleiche wird für den Namen "swishy" für die alternativen swash Glyphen getan, die dann an die swash() Funktion übergeben werden. Die "odd-style" Glyphen werden nicht verwendet (sie werden nur hinzugefügt, um zu zeigen, dass mehrere Werte in der Karte definiert werden können).

css
/* 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);
}

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

JavaScript

Der untenstehende Code findet die entsprechende CSSFontFeatureValuesRule für die oben hinzugefügte CSS @font-feature-values At-Regel. Anschließend iteriert er über die Werte der Eigenschaften styleset und swash, die durch CSSFontFeatureValuesMap Instanzen repräsentiert werden, unter Verwendung der forEach() Methode. Bei jedem Schritt protokolliert er die benutzerdefinierten Namen und Indexwerte.

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

js
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.");
}

@font-feature-values

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

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

CSS Object Model (CSSOM)
CSSFontFeatureValuesMap
Instanzeigenschaften
1. size
Instanzmethoden
Verwandte Seiten für CSSOM
Anleitungen
1. CSS Declaration
2. CSS-Deklarationsblock
3. Bestimmung der Dimensionen von Elementen
4. Verwaltung der Bildschirmorientierung
5. Verwenden dynamischer Styling-Informationen
6. CSS-Wertserialisierung

CSSFontFeatureValuesMap

In diesem Artikel

Instanz-Eigenschaften

Instanz-Methoden

Beispiele

Benutzerdefinierte Namen protokollieren

CSS

JavaScript

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

Help improve MDN