CSS-Schriften
Das CSS-Fonts-Modul definiert schriftbezogene Eigenschaften und wie Schriftressourcen geladen werden. Es ermöglicht Ihnen, den Stil einer Schrift zu definieren, wie zum Beispiel ihre Familie, Größe und Gewicht sowie die Glyphenvarianten, die verwendet werden sollen, wenn für ein einzelnes Zeichen mehrere verfügbar sind.
Eine Schrift ist eine Ressourcendatei, die die visuelle Darstellung von Zeichen enthält und Zeichencodes zu Glyphen zuweist, die Buchstaben, Zahlen, Satzzeichen und sogar Emojis einer Schriftart darstellen. Eine Schriftfamilie ist eine Gruppe von Schriften, die gemeinsame Designstile und Schriftsatzeigenschaften teilen, wobei jedes Mitglied der Gruppe verschiedene Darstellungen der Glyphen bietet, die je nach Strichstärke, Neigung oder relativer Breite variieren, unter anderem. Eine Schrift stellt typischerweise einen einzelnen Stil einer Schriftart dar, wie beispielsweise Helvetica in fett und kursiv. Eine Schriftfamilie ist die vollständige Menge an 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-Fonts-Moduls ermöglichen das Herunterladen mehrerer Schriftvariationen. Sie definieren auch die zu verwendende Schriftdatei für ein bestimmtes Schriftsatzmerkmal zusammen mit Fallback-Anweisungen, falls eine Ressource nicht geladen werden kann. Der CSS-Schriftauswahlmechanismus beschreibt den Prozess des Zuordnens einer gegebenen Menge von CSS-Schrifteigenschaften zu einem einzelnen Schriftbild.
Das CSS-Fonts-Modul unterstützt auch variable Schriften. Im Gegensatz zu regulären 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 enthält. Abhängig von der Schriftart kann dies eine Vielzahl von Schriftvarianten beinhalten. Variable Schriften sind Teil der OpenType-Schriftenspezifikation.
Referenz
Eigenschaften
-
fontKurzform font-familyfont-feature-settingsfont-kerningfont-language-overridefont-optical-sizingfont-palettefont-sizefont-size-adjustfont-stretchfont-stylefont-weight-
font-synthesisKurzform font-synthesis-positionfont-synthesis-small-capsfont-synthesis-stylefont-synthesis-weight-
font-variantKurzform font-variant-alternatesfont-variant-capsfont-variant-east-asianfont-variant-emojifont-variant-ligaturesfont-variant-numericfont-variant-positionfont-variation-settings
Die Spezifikation definiert auch die font-width-Eigenschaft, die bisher von keinem Browser unterstützt wird.
At-Regeln und Deskriptoren
- At-Regel:
@font-face -
Deskriptoren:
Das CSS-Fonts-Modul 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 werden diese Funktionen von keinem Browser unterstützt.
- At-Regel:
@font-feature-values
Das CSS-Fonts-Modul definiert auch den font-display Deskriptor. Derzeit wird diese Funktion von keinem Browser unterstützt.
- At-Regel:
@font-palette-values -
Deskriptoren:
Datentypen
font-size Typen:
font-family Typ:
font-feature-settings Typ:
font-format Typ:
font-stretch Typ:
font-tech Typen:
font-variant Typen:
font-variant-ligatures Typen:
font-variant-numeric Typen:
font-weight Typ:
Schnittstellen
Leitfäden
- Lernen: Grundlegende Text- und Schriftgestaltung
-
Dieser Anfängerkurs behandelt die grundlegenden Grundlagen der Text- und Schriftgestaltung. Er behandelt, wie man das Schriftgewicht, die Schriftfamilie und den Stil mit der
font-Kurzform einstellt und wie man Text ausrichtet sowie Zeilen- und Buchstabenzwischenräume verwaltet. - Lernen: Webfonts
-
Dieser Anfängerkurs erklärt, wie benutzerdefinierte Schriften auf Ihrer Webseite verwendet werden können, um eine vielfältigere und benutzerdefinierte Textgestaltung zu ermöglichen.
- OpenType-Schriftenmerkmale
-
Schriftmerkmale oder -varianten beziehen sich auf verschiedene Glyphen oder Zeichenstile, die in einer OpenType-Schrift enthalten sind. Dazu gehören Dinge wie Ligaturen (spezielle Glyphen, die Zeichen wie 'fi' oder 'ffl' kombinieren), Kerning (Anpassungen des Abstands zwischen bestimmten Buchstabenpaarungen), Brüche, Ziffernstile und eine Reihe anderer. Diese werden alle als OpenType-Merkmale bezeichnet und können im Web über spezifische Eigenschaften und eine Kontrolleigenschaft auf niedriger Ebene —
font-feature-settings— genutzt werden. Dieser Artikel bietet Ihnen alles, was Sie über die Verwendung von OpenType-Schriftenmerkmalen in CSS wissen müssen. - Web Open Font Format (WOFF)
-
WOFF verwendet eine komprimierte Version der gleichen tabellenbasierten
sfnt-Struktur, die von TrueType, OpenType und Open Font Format verwendet wird, fügt jedoch Metadaten und Datenstrukturen zur privaten Verwendung hinzu, einschließlich vordefinierter Felder, die es Schriftgiesereien und Anbietern ermöglichen, Lizenzinformationen bereitzustellen, falls gewünscht. - Variable Schriften
-
Dieser Artikel hilft Ihnen beim Einstieg in die Verwendung variabler Schriften.
- Verbesserung der Schriftleistung
-
Dieser Artikel, Teil des CSS-Leitfadens zur Leistungsverbesserung, diskutiert das Schriftladen, das Laden nur der benötigten Glyphen und die Definition des Schriftanzeigeverhaltens mit dem
font-display-Deskriptor.
Verwandte Konzepte
letter-spacingCSS Eigenschaftline-heightCSS Eigenschafttext-transformCSS Eigenschaft
Spezifikationen
Siehe auch
- CSS-Schriftladen Modul
- CSS-Schriftlade-API
- CSS-Text Modul
- CSS-Schreibmodi Modul