CSS-Schriften

Das CSS-Schriften-Modul definiert schriftbezogene Eigenschaften und wie Schriftressourcen geladen werden. Es ermöglicht Ihnen, den Stil einer Schrift zu definieren, wie z.B. ihre Familie, Größe und Gewicht, sowie die Glyphenvarianten, die verwendet werden sollen, wenn mehrere für ein einzelnes Zeichen verfügbar sind.

Eine Schrift ist eine Ressourcendatei, die die visuelle Darstellung von Zeichen enthält und Zeichenkodierungen auf Glyphen abbildet, die Buchstaben, Zahlen, Satzzeichen und sogar Emojis einer Schriftart repräsentieren. Eine Schriftfamilie ist eine Gruppe von Schriften, die gemeinsame Designstile und Schrifteigenschaften teilen, wobei jedes Mitglied der Gruppe unterschiedliche Möglichkeiten zur Anzeige der Glyphen bietet, variierend in Strichstärke, Neigung oder relativer Breite, unter anderen Attributen. Eine Schrift repräsentiert in der Regel einen einzelnen Stil einer Schriftart, wie Helvetica, das fett und kursiv ist. Eine Schriftfamilie ist das vollständige Set von Stilen. Das Einbinden einer solchen Schrift in ein Dokument oder Design erfolgt durch die Definition einer separaten @font-face-Deklaration für jede Schriftressource.

Die Eigenschaften, At-Regeln und Deskriptoren des CSS-Schriftenmoduls ermöglichen das Herunterladen mehrerer Variationen einer Schrift. Sie definieren auch die zu verwendende Schriftdatei für ein bestimmtes Schriftsmerkmal, zusammen mit Fallback-Anweisungen für den Fall, dass eine Ressource nicht geladen werden kann. Der CSS-Schriftauswahlmechanismus beschreibt den Prozess des Abgleichs eines gegebenen Satzes von CSS-Schrifteigenschaften mit einem einzelnen Schriftstil.

Das CSS-Schriftenmodul unterstützt auch variable Schriften. Anders als reguläre Schriften, bei denen jeder Stil als separate Schriftdatei implementiert wird, können variable Schriften alle Stile innerhalb einer einzigen Datei enthalten. Durch die Verwendung einer einzigen @font-face-Deklaration können Sie eine variable Schrift importieren, die alle Stile umfasst. Abhängig von der Schrift kann dies eine Vielzahl von Schriftvarianten beinhalten. Variable Schriften sind Teil der OpenType-Schriftenspezifikation.

Referenz

Eigenschaften

At-Regeln und Deskriptoren

At-Regel: @font-face

Deskriptoren:

Das CSS-Schriftenmodul definiert auch die Deskriptoren font-language-override, font-named-instance, font-width, font-size, subscript-position-override, subscript-size-override, superscript-position-override und superscript-size-override. Derzeit unterstützt kein Browser diese Features.

Das CSS-Schriftenmodul definiert auch den Deskriptor font-display. Derzeit unterstützt kein Browser dieses Feature.

At-Regel: @font-palette-values

Deskriptoren:

Datentypen

Schnittstellen

Leitfäden

Lernen: Grundlegende Text- und Schriftstile

Dieser Anfängerleitfaden behandelt die grundlegenden Prinzipien der Text- und Schriftstile. Er behandelt, wie man die Schriftstärke, -familie und -stil durch Verwendung der font Kurzform setzt und wie man Text ausrichtet sowie den Linien- und Buchstabenabstand verwaltet.

Lernen: Web-Schriften

Dieser Anfängerleitfaden erklärt, wie man benutzerdefinierte Schriften auf Ihrer Webseite verwendet, um vielfältigere und benutzerdefinierte Textstile zu ermöglichen.

OpenType-Schriftfeatures

Schriftfeatures oder Varianten beziehen sich auf verschiedene Glyphen oder Zeichenstile innerhalb einer OpenType-Schrift. Dazu gehören Dinge wie Ligaturen (spezielle Glyphen, die Zeichen kombinieren wie 'fi' oder 'ffl'), Kerning (Anpassungen des Abstands zwischen spezifischen Buchstabenpaaren), Brüche, Zahlenstile und viele weitere. Diese werden alle als OpenType-Features bezeichnet und sind im Web über spezifische Eigenschaften und eine low-level Kontroll-Eigenschaft — font-feature-settings — verfügbar. Dieser Artikel bietet Ihnen alles, was Sie über die Verwendung von OpenType-Schriftfeatures in CSS wissen müssen.

Variable Schriften

Dieser Artikel hilft Ihnen beim Einstieg in die Verwendung von variablen Schriften.

Verbesserung der Schriftenleistung

Dieser Artikel, Teil des CSS-Leistungsleitfadens, behandelt das Laden von Schriften, das Laden nur der erforderlichen Glyphen und das Definieren des Schriftdarstellungsverhaltens mit dem font-display Deskriptor.

Verwandte Konzepte

Spezifikationen

Specification
CSS Fonts Module Level 4

Siehe auch