CSS-Kurs / Schriftarten, Schriftgrößen und Zeilenhöhe

Verwenden Sie font-family, um eine Fallback-Schriftenliste zu definieren, font-size, um die Textgröße festzulegen, und line-height, um den Abstand zwischen den Zeilen zu steuern. Eine einheitenlose (unitless) line-height skaliert mit der Schriftgröße jedes Elements, was die Verwaltung geerbter Textstile erleichtert.

Definieren Sie eine geordnete Fallback-Schriftenliste

body {

  font-family: "Noto Sans KR", "Malgun Gothic", sans-serif;

}

Der Browser prüft die Schriftartenliste der Reihe nach. Wenn eine Schriftart nicht verfügbar ist oder ein Zeichen fehlt, kann eine andere Schriftart dieses Zeichen darstellen, sodass ein Satz mehrere Schriftarten verwenden kann. sans-serif ist eine generische Familie ohne Serifen und kein bestimmtes Schriftartenprodukt. Setzen Sie Schriftartnamen mit Leerzeichen in Anführungszeichen.

Das Auflisten einer Schriftart in font-family lädt sie nicht herunter. Dieses Beispiel verwendet installierte Schriftarten und lädt keine separate Webschriftart. Um eine Webschriftart zu verwenden, stellen Sie die tatsächliche Datei über @font-face oder ein Stylesheet des Anbieters bereit und prüfen Sie die URL und die Nutzungsberechtigung. Siehe MDN: Schriftfamilie.

Wählen Sie Schriftgröße und -gewicht für jede Rolle

rem basiert auf der HTML-Schriftgröße. Unterschiedliche Browsereinstellungen können zu unterschiedlichen Pixelwerten für dasselbe 1rem führen. Bevor der Text auf feste Pixelgröße geändert wird, weil der Text klein aussieht, prüfen Sie den Root-Wert und die tatsächliche Schriftart. Selbst wenn die Größe gleich ist, variieren die visuelle Größe und die Zeilenumbruchposition je nach Schriftartdesign. Bei der Auswahl einer Einheit sollten zunächst CSS-Farben und Einheiten unterschieden werden: px, em, rem und Prozentsätze.

400 entspricht normalerweise normal, und 700 entspricht bold. Die Ergebnisse variieren je nach dem Gewicht, das von der Schriftart bereitgestellt wird, und fehlende Gewichte können durch nahe Werte ersetzt oder synthetisiert werden. Wichtige Bedeutungen im Dokument werden mit HTMLs strong ausgedrückt, und die visuelle Dicke wird mit CSS gesteuert. Nicht alle fettgedruckten Buchstaben sind semantisch bedeutsam.

Vergleichen Sie die Vererbung der line-height ohne Einheiten und in em

line-height hilft, die Höhe einer Zeilenbox zu bestimmen; es bedeutet nicht einfach die leere Lücke zwischen Zeichen und ist nicht dasselbe wie die Glyphenhöhe. Verwenden Sie margin separat für den Abstand zwischen Absätzen. Für weitere Details siehe CSS Absatz- und Listenformatierung.

Vergleichen Sie, wenn die Schriftgröße des Elternteils 16px und die Schriftgröße des Kindes 32px beträgt. Bei line-height: 1.6 wird der Faktor selbst vererbt. Das Kindelement berechnet damit 32px × 1.6 = 51,2px Zeilenhöhe. Bei line-height: 1.6em erbt das Kindelement dagegen die schon am Elternelement berechnete Länge von 25,6px. Wenn die größere Schrift im Kindelement mehrere Zeilen umfasst, können die Zeilen gedrängt oder überlappend erscheinen.

Diese Vererbungsberechnungen gehen davon aus, dass das Kind keine separate line-height-Deklaration hat. Ein am Kind deklarierter Wert hat Vorrang vor einem vererbten Wert. Ein einheitenloser Ausgangswert für line-height erleichtert die Anpassung von Überschriften- und anderen Textgrößen bei gleichzeitig proportionaler Zeilenhöhe. Siehe MDN: Zeilenhöhe.

Begrenzen Sie die Lesebreite

max-width: 65ch begrenzt die Lesebreite anhand der Vorschubbreite des „0“-Zeichens der Schriftart. Es garantiert nicht genau 65 Zeichen pro Zeile. Das tatsächliche Umbruchverhalten hängt von Schriftart, Schriftschnitt, Zeichen und verfügbarer Breite ab. Wählen Sie eine sinnvolle Breite, indem Sie realistische lange Absätze lesen.

Die CSS-Längenreferenz definiert schriftrelative Einheiten, einschließlich ch, und erklärt deren Referenzmessungen. Siehe MDN: Länge.

Überprüfen Sie gerenderte Schriftarten und berechnete Werte

Speichern Sie den gesamten untenstehenden Code als UTF-8 in fonts.html und öffnen Sie ihn in Ihrem Browser. Sowohl Absätze mit kleiner Schrift als auch Absätze mit 32px Vergleich sind enthalten, damit Sie das Verhältnis zwischen Größe und Zeilenabstand überprüfen können.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Compare fonts and line spacing</title>
  <style>
    html { font-size: 100%; }
    body { margin: 24px; color: #333; font-family: "Noto Sans KR", "Malgun Gothic", sans-serif; }
    main { max-width: 65ch; }
    h1 { font-size: 2rem; font-weight: 700; }
    .copy { font-size: 1rem; font-weight: 400; line-height: 1.6; }
    .compare { font-size: 16px; margin-block: 24px; padding: 16px; background: #eef6f2; }
    .unitless { line-height: 1.6; }
    .length { line-height: 1.6em; }
    .large { margin: 0; font-size: 32px; }
  </style>
</head>
<body>
  <main>
    <h1>Small Garden fonts</h1>
    <p class="copy">The garden has plants that prefer sunlight and plants that grow in shade. Read their labels to find a suitable location for each one. Adjust the line spacing of this long paragraph to compare how easily the same text can be read.</p>
    <h2>Unitless line height</h2>
    <div class="compare unitless"><p class="large">Line spacing scales with the font size.</p></div>
    <h2>Line spacing specified by em</h2>
    <div class="compare length"><p class="large">The computed line height is inherited from the parent.</p></div>
  </main>
</body>
</html>

1. Wählen Sie den Absatz des Body im Entwicklertools aus. Der Wert von font-family unter Computed ist eine Liste von Kandidaten und garantiert nicht den tatsächlich verwendeten Schriftartnamen. In Chrome·Edge können Sie die tatsächlich verwendeten Schriftarten im Abschnitt Rendered Fonts von Computed überprüfen. Andere Browser können unterschiedliche Menüstrukturen haben, z. B. ein eigenes Panel für Schriftarten.
2. Vergleichen Sie die berechnete Zeilenhöhe der beiden .large-Absätze: 51,2px beim einheitenlosen Wert und 25,6px beim em-Wert. Ändern Sie am zweiten Elternelement 1.6em zu 1.6. Prüfen Sie, ob der Unterschied verschwindet, und stellen Sie danach 1.6em wieder her.
3. Testen Sie bei .copy die Zeilenhöhen 1.2 und 1.8. Die Schriftgröße bleibt gleich, während sich der Abstand der Zeilen verändert. Verwenden Sie lange Absätze und stellen Sie anschließend 1.6 wieder her.
4. Ändern Sie max-width von main zu 45ch. Prüfen Sie den früheren Zeilenumbruch und stellen Sie danach 65ch wieder her. Ist das Fenster bereits schmaler als beide Obergrenzen, kann der sichtbare Unterschied gering sein.

Der Chrome DevTools-Leitfaden zu lokalen Schriftarten erklärt auch, wie man gerenderte Schriftarten inspiziert. Wenn die erwartete Schriftart fehlt, überprüfen Sie deren Installation und unterstützte Zeichen. Bei einer separat verlinkten Webschriftart sollten Sie deren Antwort und etwaige blockierende Fehler im Netzwerk inspizieren. Eine lokal installierte Schriftart kann ohne Netzwerkabfrage verwendet werden, sodass eine fehlende Abfrage allein nicht auf einen Schriftartfehler hinweist.