CSSFontFeatureValuesMap.values() — Methode · JavaScript-Referenz

Signatur

CSSFontFeatureValuesMap.prototype.values()

Beschreibung

values() gehört zur Map-ähnlichen Schnittstelle CSSFontFeatureValuesMap und verhält sich wie Map.prototype.values(). Anders als die Kurzbeschreibung nahelegt, liefert der Iterator nur die Werte und keine [key, value]-Paare. Paare bekommt man mit entries(), die Schlüssel mit keys().

Eine CSSFontFeatureValuesMap erhält man über die Eigenschaften einer CSSFontFeatureValuesRule, also einer @font-feature-values-Regel: styleset, stylistic, swash, ornaments, annotation und characterVariant. Jede dieser Maps ordnet einem selbst gewählten Namen (z. B. nice-style) eine Liste ganzzahliger Feature-Indizes zu, auf die font-variant-alternates dann verweist.

Die Methode ist nützlich, wenn Sie die definierten OpenType-Indizes einer Schrift auslesen möchten, etwa zur Fehlersuche, für Werkzeuge rund um Schrift-Konfigurationen oder um zu prüfen, ob bestimmte Stilsätze belegt sind. Die Namen spielen dabei keine Rolle.

Beispiele

Werte eines styleset-Blocks auslesen

const sheet = new CSSStyleSheet();
sheet.replaceSync(`
  @font-feature-values Font One {
    @styleset {
      nice-style: 12;
      double-style: 1 3;
    }
  }
`);

const rule = sheet.cssRules[0]; // CSSFontFeatureValuesRule
const iterator = rule.styleset.values();

console.log(iterator.next().value);
console.log(iterator.next().value);
console.log(iterator.next().done);

[12] [1, 3] true

Alle belegten Indizes mit for...of sammeln

const sheet = new CSSStyleSheet();
sheet.replaceSync(`
  @font-feature-values MyFont {
    @swash { fancy: 1; extra: 2; }
  }
`);

const rule = sheet.cssRules[0];
const indices = [];
for (const value of rule.swash.values()) {
  indices.push(...value);
}
console.log(indices);

[1, 2]

Mit Spread-Syntax und Funktionsprüfung

const rule = [...document.styleSheets]
  .flatMap((s) => { try { return [...s.cssRules]; } catch { return []; } })
  .find((r) => r instanceof CSSFontFeatureValuesRule);

if (rule?.styleset && typeof rule.styleset.values === 'function') {
  const all = [...rule.styleset.values()];
  console.log('Stilsätze:', all);
} else {
  console.log('Keine @font-feature-values-Regel oder keine Unterstützung');
}

Stilsätze: [[12], [1, 3]] // je nach Stylesheet

// Wichtig · Fallstricke

Nur Werte: Die Methode liefert keine [key, value]-Paare. Wenn Sie die Namen auch brauchen, nehmen Sie entries() oder forEach().
Jeder Wert ist ein Array, auch wenn nur ein einzelner Index deklariert ist, z. B. [12] statt 12.
Der Iterator ist nach einem Durchlauf verbraucht. Für einen erneuten Durchlauf müssen Sie values() noch einmal aufrufen.
Browser-Kompatibilität: Die Map-Eigenschaften von CSSFontFeatureValuesRule (etwa styleset) werden nicht überall unterstützt. Firefox kennt die Regel zum Beispiel schon lange, stellt die Maps aber teilweise nicht bereit. Prüfen Sie vor der Nutzung, ob die Funktion vorhanden ist.
Bei Stylesheets von fremden Ursprüngen (CORS) löst der Zugriff auf cssRules einen SecurityError aus. Fangen Sie ihn mit try...catch ab.

Siehe auch

Map.prototype.values() CSSFontFeatureValuesMap.delete() CSSFontFeatureValuesMap.has() CSSFontFeatureValuesMap.clear() CSSFontFeatureValuesMap.entries()