CSS-Schriften
Das CSS-Schriften-Modul definiert schriftenbezogene 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 zu verwenden, wenn mehrere für ein einzelnes Zeichen verfügbar sind.
Eine Schrift ist eine Ressourcendatei, die die visuelle Darstellung von Zeichen enthält und Zeichencodes auf Glyphen abbildet, die Buchstaben, Zahlen, Satzzeichen und sogar Emojis eines Schriftbildes darstellen. 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, die sich z. B. durch Strichstärke, Neigung oder relative Breite unterscheiden. Eine Schrift repräsentiert typischerweise einen einzelnen Stil eines Schriftbildes, wie zum Beispiel Helvetica, das fett und kursiv ist. Eine Schriftfamilie ist der vollständige Satz 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-Schriften-Moduls ermöglichen das Herunterladen von mehreren Variationen einer Schrift. Sie definieren auch die Schriftdatei, die für eine bestimmte Schrifteigenschaft verwendet werden soll, zusammen mit Fallback-Anweisungen für den Fall, dass eine Ressource nicht geladen werden kann. Der CSS-Schriftauswahlmechanismus beschreibt den Prozess der Zuordnung einer gegebenen Menge an CSS-Schrifteigenschaften zu einem einzelnen Schriftbild.
Das CSS-Schriften-Modul unterstützt auch variable Schriften. Im Gegensatz zu regulären Schriften, bei denen jeder Stil als separate Schriftdatei implementiert ist, können variable Schriften alle Stile in 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 umfassen. Variable Schriften sind Teil der OpenType-Schriftenspezifikation.
Referenz
Eigenschaften
-
font
Kurzschreibweise font-family
font-feature-settings
font-kerning
font-language-override
font-optical-sizing
font-palette
font-size
font-size-adjust
font-stretch
font-style
font-weight
-
font-synthesis
Kurzschreibweise font-synthesis-position
font-synthesis-small-caps
font-synthesis-style
font-synthesis-weight
-
font-variant
Kurzschreibweise font-variant-alternates
font-variant-caps
font-variant-east-asian
font-variant-emoji
font-variant-ligatures
font-variant-numeric
font-variant-position
font-variation-settings
Die Spezifikation definiert auch die font-width
-Eigenschaft, die noch von keinem Browser unterstützt wird.
At-Regeln und Deskriptoren
- At-Regel:
@font-face
-
Deskriptoren:
Die Spezifikation 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
, die von keinem Browser unterstützt werden.
- At-Regel:
@font-feature-values
-
Deskriptor:
- 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: Grundlegendes Text- und Schriftstyling
-
Dieser Anfängerleitfaden behandelt die grundlegenden Grundlagen des Text- und Schriftstylings. Er behandelt, wie man das Schriftgewicht, die Familie und den Stil mit der
font
-Kurzschreibweise setzt und wie man Text ausrichtet und den Zeilen- und Buchstabenabstand verwaltet. - Lernen: Web-Schriften
-
Dieser Anfängerleitfaden erklärt, wie man benutzerdefinierte Schriften auf Ihrer Webseite verwendet, um variierteres und benutzerdefiniertes Textstyling zu ermöglichen.
- Leitfaden zu OpenType-Schriftenmerkmalen
-
Schriftmerkmale oder Varianten beziehen sich auf verschiedene Glyphen oder Zeichenstile, die in einer OpenType-Schrift enthalten sind. Dazu gehören Dinge wie Ligaturen (besondere Glyphen, die Zeichen wie 'fi' oder 'ffl' kombinieren), Kerning (Anpassungen des Abstands zwischen bestimmten Buchstabenpaaren), Brüche, Zahlenstile und viele andere. Dies sind alles OpenType-Merkmale, die durch spezifische Eigenschaften und eine Low-Level-Steuereigenschaft —
font-feature-settings
— im Web nutzbar sind. Dieser Artikel bietet Ihnen alles, was Sie über die Verwendung von OpenType-Schriftmerkmalen in CSS wissen müssen. - Leitfaden zu variablen Schriften
-
Dieser Artikel hilft Ihnen beim Einstieg in die Verwendung von variablen Schriften.
- Verbesserung der Schriftperformance
-
Dieser Artikel, Teil des CSS-Performance-Leitfadens, behandelt das Laden von Schriften, das Laden nur der erforderlichen Glyphen und das Definieren des Schriftanzeigeverhaltens mit dem
font-display
-Deskriptor.
Verwandte Konzepte
letter-spacing
CSS-Eigenschaftline-height
CSS-Eigenschafttext-transform
CSS-Eigenschaft
Spezifikationen
Specification |
---|
CSS Fonts Module Level 4 |