Vielen Dank, dass du bei der Google I/O dabei warst! Inhalte on demand ansehen

Diese Seite wurde von der Cloud Translation API übersetzt.

Text und Typografie

The CSS Podcast – 036: Text & Typography

Text ist einer der Grundbausteine des Webs.

Wenn Sie eine Website erstellen, müssen Sie Ihren Text nicht unbedingt formatieren. HTML bietet eigentlich ziemlich vernünftige Standardformatierungen.

Der Text auf Ihrer Website wird jedoch wahrscheinlich den größten Teil Ihrer Website ausmachen. Daher lohnt es sich, sie mit etwas Stil aufzupeppen. Durch die Änderung einiger grundlegender Eigenschaften können Sie die Lesbarkeit für Ihre Nutzer erheblich verbessern.

In diesem Modul beginnen wir mit der Regel @font-face, mit der Sie benutzerdefinierte Schriftarten in Ihre Webseiten importieren können. So haben Sie die gewünschte Typografie unabhängig von von Nutzern installierten Schriftarten zur Verfügung.

Anschließend werden die wichtigsten CSS-Schrifteigenschaften behandelt, darunter font-family, font-style, font-weight und font-size. Diese Grundlagen bilden die Grundlage für die Textbearbeitung, sowohl in Bezug auf Stil als auch auf Lesbarkeit.

Außerdem gehen wir auf absatzspezifische Eigenschaften wie text-indent und word-spacing ein, bevor wir zum Schluss mit erweiterten Themen wie variablen Schriftarten und Pseudoelementen kommen, mit denen Sie Ihre typografische Steuerung weiter optimieren können.

Es werden praktische Beispiele und Tipps zur Vertiefung Ihres Verständnisses und zur Anwendung dieser CSS-Techniken bereitgestellt.

Die `@font-face`-Regel

Die CSS-At-Rule @font-face ist im Webdesign unerlässlich. Mit ihr können Sie benutzerdefinierte Schriftarten für die Textanzeige angeben und verwenden. Der Vorteil von @font-face ist seine Vielseitigkeit: Sie können Schriftarten von einem Remote-Server oder von einer Schriftart beziehen, die auf dem Gerät des Nutzers installiert ist.

Syntax

@font-face {
  font-family: "Trickster";
  src:
    local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1),
    url("trickster-outline.otf") format("opentype"),
    url("trickster-outline.woff") format("woff")
}

Schlagworte

ascent-override: Mit diesem Messwert wird der Aufwärtstrend angepasst, was sich auf den Bereich über der Baseline auswirkt.
descent-override: Passt den Abstiegsmesswert an, was sich auf den Abstand unter der Grundlinie auswirkt.
font-display: Steuert das Anzeigeverhalten der Schriftart abhängig vom Downloadstatus.
font-family: Gibt der Schriftart einen Namen, der in schriftbezogenen Eigenschaften verwendet werden soll.
font-stretch: Legt die zulässige horizontale Skalierung als einzelnen Wert oder Bereich fest.
font-style: Definiert den Schriftstil und unterstützt Neigungsbereiche für Schrägstriche.
font-weight: Bestimmt die Schriftstärke oder den verfügbaren Bereich der Schriftstärken.
font-feature-settings: Ermöglicht den Zugriff auf OpenType-Schriftschnittfunktionen.
font-variation-settings: Feinabstimmung der Einstellungen für variable Schriftart.
line-gap-override: Überschreibt den standardmäßigen Zeilenabstand der Schriftart.
size-adjust: Werden auf den Umriss und die Metrics der Schrift ein Skalierungsfaktor angewendet.
src: Definiert die Schriftartquelle, lokal oder remote. Dies ist für die @font-face-Regel erforderlich. Eine gängige Strategie ist die Kombination von url() und local() innerhalb von src. Dabei wird bei Verfügbarkeit eine lokale Schriftart verwendet und als Fallback auf eine Remote-Schriftdatei zurückgegriffen. Browser priorisieren Ressourcen nach der Reihenfolge der Deklaration. Daher sollte local() normalerweise vor url() stehen.
unicode-range: Begrenzt die Zeichen, für die diese Schriftart verwendet werden soll.

Beschreibung

@font-face befreit Designer von den Einschränkungen von „websicheren“ Schriftarten, da sie benutzerdefinierte Typografie verwenden können. Die Funktion local() ermöglicht die Suche nach einer Schriftart auf dem Gerät des Nutzers und bietet so eine nahtlose Nutzung, die nicht unbedingt von einer Internetverbindung abhängt.

MIME-Typen für die Schriftart

Format	MIME-Typ
TrueType	`font/ttf`
OpenType	`font/otf`
Web Open Font Format	`font/woff`
Web Open Font Format 2	`font/woff2`

Der Unterschied zwischen @font-face und font-family

In CSS werden @font-face und font-family häufig verwechselt, dienen aber unterschiedlichen Zwecken.

Wie bereits erwähnt, ist @font-face eine Regel, mit der benutzerdefinierte Schriftarten definiert werden, die Sie in Ihrer Webanwendung verwenden möchten. Es teilt dem Browser mit, wo er die Schriftart herunterladen und wie er sie beim Laden anzeigen soll (mit der Eigenschaft font-display). Außerdem wird angegeben, welche Zeichen heruntergeladen werden sollen (mit unicode-range).

font-family ist dagegen eine CSS-Eigenschaft, die in einer CSS-Regel verwendet wird, um einem Element eine bestimmte Schriftart oder eine Liste von Schriftarten zuzuweisen. Die unter font-family aufgeführten Schriftarten können Web-Safe-Schriftarten, Systemschriften oder benutzerdefinierte Schriftarten sein, die mit @font-face definiert wurden.

Zusammenfassend lässt sich sagen, dass mit @font-face eine Schriftart deklariert und benannt wird und font-family diese deklarierte Schriftart auf HTML-Elemente anwendet.

Hier ein Beispiel für die Verwendung beider Typen:

<table>
  <thead>
    <tr>
      <th><p><pre>
@font-face {
  font-family: "CustomFont";
  src: url("customfont.woff2") format("woff2");
}

body {
  font-family: "CustomFont", Arial, sans-serif;
}

In diesem Beispiel definiert @font-face „CustomFont“ und teilt dem Browser mit, wo sie zu finden ist. Die Property font-family wendet sie dann auf das Body-Element an. Arial wird als Fallback verwendet, wenn „CustomFont“ nicht verfügbar ist.

Schriftart ändern

Unterstützte Browser

Text und Typografie

The CSS Podcast – 036: Text & Typography

Die @font-face-Regel

Syntax

Schlagworte

Beschreibung

MIME-Typen für die Schriftart

Der Unterschied zwischen @font-face und font-family

Schriftart ändern

Kursiv- und Schrägstriche verwenden

Text fett formatieren

Textgröße ändern

Abstand zwischen Zeilen ändern

Abstand zwischen Zeichen ändern

Abstand zwischen Wörtern ändern

font Kurzschrift

Groß- oder Kleinschreibung des Texts ändern

Text unter-, über- oder durchstreichen

Text einrücken

Überlaufende oder versteckte Inhalte

Weißraum steuern

Zeilenumbruch von Wörtern steuern

Textausrichtung ändern

Textrichtung ändern

Textfluss ändern

Textausrichtung ändern

Text einen Schatten hinzufügen

Variable Schriftarten

Pseudo-Elemente

::first-letter- und ::first-line-Pseudoelemente

::selection-Pseudoelement

font-variant

Wissenstest

Ressourcen

Die `@font-face`-Regel

`font` Kurzschrift

`::first-letter`- und `::first-line`-Pseudoelemente

`::selection`-Pseudoelement