FontFace.unicodeRange — Eigenschaft · JavaScript-Referenz

Signatur

FontFace.unicodeRange

Beschreibung

Die Eigenschaft unicodeRange des Interfaces FontFace ist ein String, der beschreibt, für welche Unicode-Zeichen eine Schrift zuständig ist. Sie entspricht dem Deskriptor unicode-range einer @font-face-Regel in CSS. Der Standardwert ist "U+0-10FFFF", also der gesamte Unicode-Bereich.

Wofür ist das gut? Ein Browser lädt eine Schriftdatei nur dann herunter, wenn auf der Seite tatsächlich Zeichen aus dem angegebenen Bereich vorkommen. Deshalb kann man große Schriften in Teilmengen (Subsets) aufteilen, etwa Latein, Kyrillisch oder Griechisch, und jede Teilmenge als eigene FontFace mit derselben family anlegen. So werden nur die Dateien geladen, die wirklich gebraucht werden. Man kann auf diese Weise auch einzelne Zeichen wie das kaufmännische Und (&) aus einer anderen Schrift darstellen lassen.

Der Wert besteht aus einer kommagetrennten Liste. Möglich sind einzelne Codepunkte (U+26), Bereiche (U+0000-00FF) und Platzhalter mit ? (U+4?? steht für U+400 bis U+4FF). Den Wert kann man beim Erzeugen über das Deskriptor-Objekt des Konstruktors angeben oder danach direkt setzen. Die Schrift sollte man aber konfigurieren, bevor man sie lädt und zu document.fonts hinzufügt.

Parameter

Name	Typ	Default	Beschreibung
$value	string	"U+0-10FFFF"	Beim Setzen: eine kommagetrennte Liste von Unicode-Bereichen in der CSS-Syntax von `unicode-range`, z. B. `"U+0000-00FF, U+0131, U+2000-206F"`.

Rückgabewert

Typ

string

Beschreibung

Der aktuelle Unicode-Bereich als String in CSS-Syntax. Browser können ihn normalisiert zurückgeben, etwa in Großbuchstaben oder mit aufgelösten Platzhaltern.

Beispiele

Unicode-Bereich beim Erzeugen festlegen und auslesen

const latin = new FontFace(
  'Inter',
  'url(/fonts/inter-latin.woff2) format("woff2")',
  { unicodeRange: 'U+0000-00FF, U+0131, U+0152-0153, U+2000-206F' }
);

console.log(latin.unicodeRange);

U+0-FF, U+131, U+152-153, U+2000-206F

Schrift in Teilmengen aufteilen (Latein + Kyrillisch)

const subsets = [
  { file: 'inter-latin.woff2', range: 'U+0000-00FF, U+2000-206F' },
  { file: 'inter-cyrillic.woff2', range: 'U+0400-045F, U+0490-0491' }
];

for (const { file, range } of subsets) {
  const face = new FontFace('Inter', `url(/fonts/${file})`, {
    unicodeRange: range,
    display: 'swap'
  });
  document.fonts.add(face);
}

// Der Browser lädt nur die Dateien, deren Bereich auf der Seite vorkommt
document.body.style.fontFamily = 'Inter, sans-serif';
await document.fonts.ready;
console.log([...document.fonts].map(f => `${f.family}: ${f.status}`));

["Inter: loaded", "Inter: unloaded"] // bei rein lateinischem Text

Nur das &-Zeichen aus einer Zierschrift darstellen

const amp = new FontFace('FancyAmp', 'url(/fonts/baskerville-italic.woff2)');
amp.unicodeRange = 'U+26'; // nachträglich setzen, vor dem Laden

await amp.load();
document.fonts.add(amp);

// In CSS: font-family: FancyAmp, Georgia, serif;
document.querySelector('h1').style.fontFamily = 'FancyAmp, Georgia, serif';
console.log(amp.unicodeRange);

U+26

// Wichtig · Fallstricke

Ungültige Syntax: Wenn man einen ungültigen String zuweist, etwa \"0-FF\" ohne U+, wirft der Setter einen SyntaxError (DOMException). Im Konstruktor führt ein ungültiger Wert dazu, dass die FontFace den Status \"error\" bekommt und loaded verworfen wird.
Kein Schutz vor Laden: Wer face.load() selbst aufruft, lädt die Datei in jedem Fall, egal was in unicodeRange steht. Die Einsparung durch Teilmengen gibt es nur, wenn man das Laden dem Browser überlässt, also die Schrift mit document.fonts.add() hinzufügt, ohne load() aufzurufen.
Kein Zuschneiden der Datei: unicodeRange schneidet die Schriftdatei nicht zu. Es legt nur fest, für welche Zeichen der Browser die Schrift verwendet. Echte Teilmengen muss man vorher mit Werkzeugen wie pyftsubset oder glyphhanger erzeugen.
Normalisierung: Wie der zurückgegebene String formatiert ist (Groß-/Kleinschreibung, führende Nullen), unterscheidet sich zwischen den Browsern. Man sollte ihn daher nicht per String-Vergleich prüfen.
Kompatibilität: Wird von Chrome, Edge, Firefox und Safari (ab 10) unterstützt, auch in Web Workern über self.fonts.

Siehe auch

FontFace FontFace.family FontFace.prototype.load() FontFace.status FontFaceSet Document.fonts FontFace.descentOverride