CSS-Größenanpassung für @font-face

Während eine Webschriftart geladen wird, können Sie jetzt ihren Maßstab anpassen, um die Schriftgrößen des Dokuments zu normalisieren und beim Wechseln zwischen Schriftarten ein Layout-Verrutschen zu verhindern.

In der folgenden Demo ist font-size immer 64px und der einzige Unterschied zwischen den einzelnen Überschriften ist font-family. Die Beispiele auf der linken Seite wurden nicht angepasst und haben eine inkonsistente endgültige Größe. In den Beispielen auf der rechten Seite wird size-adjust verwendet, damit 64px die einheitliche Endgröße ist.

In diesem Beitrag geht es um einen neuen CSS-Schriftschnitt-Beschreibungsblock namens size-adjust. Außerdem werden einige Möglichkeiten gezeigt, wie Schriftgrößen korrigiert und normalisiert werden können, um die Nutzerfreundlichkeit zu verbessern, Designsysteme einheitlich zu gestalten und ein vorhersehbareres Seitenlayout zu ermöglichen. Ein wichtiger Anwendungsfall ist die Optimierung des Web-Schrift-Renderings, um kumulative Layoutverschiebungen (CLS) zu verhindern.

Hier ist eine interaktive Demo des Problemraums. Ändern Sie die Schriftart im Drop-down-Menü und beobachten Sie Folgendes:

1. Die Höhenunterschiede in den Ergebnissen.
2. Visuell irritierende Inhaltsübergänge
3. Bewegliche interaktive Zielbereiche (das Drop-down-Menü springt herum).

Schriftarten mit size-adjust skalieren

Einführung in die Syntax:

@font-face {
  font-family: "Adjusted Typeface";
  size-adjust: 150%;
  src: url(some/path/to/typeface.woff2) format('woff2');
}

1. Erstellt eine benutzerdefinierte Schriftart mit dem Namen Adjusted Typeface.
2. Mit size-adjust wird jedes Schriftzeichen auf 150% seiner Standardgröße skaliert.
3. Wirkt sich nur auf die einzelne importierte Schriftart aus.

Verwenden Sie die oben beschriebene benutzerdefinierte Schriftart so:

h1 {
  font-family: "Adjusted Typeface";
}

CLS durch nahtlosen Schriftartwechsel minimieren

Sehen Sie sich im folgenden GIF die Beispiele auf der linken Seite an und wie sich die Schrift ändert. Dies ist nur ein kleines Beispiel mit einem einzigen Überschriftenelement und das Problem ist sehr auffällig.

Schriftarten tauschen ist eine gute Methode, um das Schriftbild zu verbessern. Rendern Sie ein schnell ladendes System-Schriftbild, um den Inhalt zuerst anzuzeigen, und tauschen Sie es dann gegen ein Web-Schriftbild aus, sobald das Laden des Web-Schriftbilds abgeschlossen ist. So haben Sie das Beste aus beiden Welten: Die Inhalte sind so schnell wie möglich sichtbar und Sie erhalten eine ansprechend gestaltete Seite, ohne dass die Nutzer Zeit für die Inhalte verlieren. Das Problem ist jedoch, dass die gesamte Seite manchmal verschoben wird, wenn die Webschrift geladen wird, da sie eine etwas andere Feldhöhe hat.

Wenn Sie size-adjust in die Regel @font-face einfügen, wird eine globale Anpassung der Schriftzeichen für die Schriftart festgelegt. Wenn Sie den richtigen Zeitpunkt wählen, ist die visuelle Veränderung minimal und der Wechsel wirkt nahtlos. Für einen nahtlosen Übergang kannst du die Größe manuell anpassen oder den Größenänderungsrechner von Malte Ubl verwenden.

Zu Beginn dieses Beitrags wurde das Problem mit der Schriftgröße durch Ausprobieren behoben. size-adjust wurde im Quellcode so angepasst, dass dieselbe Überschrift in Cookie und Arial dieselbe 64px wie Press Start 2P anzeigte. Ich habe zwei Schriftarten auf eine Zielschriftgröße ausgerichtet.

@font-face {
  font-family: 'Adjusted Arial';
  size-adjust: 86%;
  src: local(Arial);
}

@font-face {
  font-family: 'Cookie';
  size-adjust: 90.25%;
  src: url(...woff2) format('woff2');
}

Schriftarten kalibrieren

Als Autor legen Sie die Kalibrierungsziele für die Normalisierung der Schriftgröße fest. Sie können Times, Arial oder einen Systemschriftschnitt normalisieren und dann benutzerdefinierte Schriftschnitte entsprechend anpassen. Sie können auch lokale Schriftarten an die heruntergeladenen anpassen.

Strategien für die size-adjust-Kalibrierung:

1. Remote-Ziel:
   Passen Sie lokale Schriftarten an heruntergeladene Schriftarten an.
2. Lokales Ziel
   :Hiermit können Sie heruntergeladene Schriftarten an lokale Zielschriften anpassen.

Beispiel 1: Remote-Ziel

Im folgenden Snippet wird eine lokal verfügbare Schriftart so angepasst, dass sie der Größe einer benutzerdefinierten Remote-src-Schriftart entspricht. Ein benutzerdefinierter Remote-Schriftschnitt ist das Ziel der Kalibrierung, z. B. eine Markenschrift:

@font-face {
  font-family: "Adjusted Regular Arial For Brand";
  src: local(Arial);
  size-adjust: 90%;
}

@font-face {
  font-family: "Rad Brand";
  src: url(some/path/to/a.woff2) format('woff2');
}

html {
  font-family: "Rad Brand", "Adjusted Regular Arial For Brand";
}

In diesem Beispiel wird die lokale Schriftart „Arial“ im Voraus an eine geladene benutzerdefinierte Schriftart angepasst, um einen nahtlosen Wechsel zu ermöglichen.

Diese Strategie hat den Vorteil, dass Designer und Entwickler dieselbe Schriftart für Größe und Typografie verwenden können. Die Marke ist das Kalibrierungsziel. Das ist eine gute Nachricht für Designsysteme.

Auch Maltes Rechner verwendet eine Markenschriftart als Ziel. Wählen Sie eine Google-Schriftart aus. Daraufhin wird berechnet, wie Arial angepasst werden muss, damit ein nahtloser Wechsel möglich ist. Hier ist ein Beispiel für Roboto-CSS aus der Rechneranwendung, in der Arial geladen und „Roboto-Fallback“ genannt wird:

@font-face {
    font-family: "Roboto-fallback";
    size-adjust: 100.06%;
    src: local("Arial");
}

Im folgenden Beispiel finden Sie eine plattformübergreifende Anpassung. Es werden zwei angepasste lokale Fallback-Schriftarten für den Fall bereitgestellt, dass keine Markenschriftart verfügbar ist.

@font-face {
    font-family: "Roboto-fallback-1";
    size-adjust: 100.06%;
    src: local("Arial");
}

@font-face {
    font-family: "Roboto-fallback-2";
    size-adjust: 99.94%;
    src: local("Arimo");
}

@font-face {
  font-family: "Roboto Regular";
  src: url(some/path/to/roboto.woff2) format('woff2');
}

html {
  font-family: "Roboto Regular", "Roboto-fallback-1", "Roboto-fallback-2";
}

Beispiel 2: Lokales Targeting

Im folgenden Snippet wird eine benutzerdefinierte Schriftart der Marke an Arial angepasst:

@font-face {
  font-family: "Rad Brand - Adjusted For Arial";
  src: url(some/path/to/a.woff2) format('woff2');
  size-adjust: 110%;
}

html {
  font-family: "Rad Brand - Adjusted For Arial", Arial;
}

Diese Strategie hat den Vorteil, dass das Rendering ohne Anpassungen erfolgt und dann alle eingehenden Schriftarten angepasst werden.

Feinabstimmung mit ascent-override, descent-override und line-gap-override

Wenn die generische Skalierung von Schriftzeichen für Ihre Design- oder Ladestrategien nicht ausreicht, finden Sie hier einige Optionen zur Feinabstimmung, die mit size-adjust funktionieren. Die Eigenschaften ascent-override, descent-override und line-gap-override sind derzeit in Chromium 87 und höher sowie in Firefox 89 und höher implementiert.

ascent-override

Der Deskriptor ascent-override definiert die Höhe über der Grundlinie eines Schriftbilds.

@font-face {
  font-family: "Ascent Adjusted Arial Bold";
  src: local(Arial Bold);
  ascent-override: 71%;
}

Die rote Überschrift (nicht angepasst) hat über den Großbuchstaben A und O Platz, während die blaue Überschrift so angepasst wurde, dass die Kapitalhöhe an den gesamten Begrenzungsrahmen anliegt.

descent-override

Der descent-override-Beschreibungswert definiert die Höhe unter der Grundlinie der Schrift.

@font-face {
  font-family: "Ascent Adjusted Arial Bold";
  src: local(Arial Bold);
  descent-override: 0%;
}

Die rote Überschrift (unbearbeitet) hat unter den Grundlinien von „D“ und „O“ Platz, während die blaue Überschrift so angepasst wurde, dass die Buchstaben genau auf der Grundlinie liegen.

line-gap-override

Der line-gap-override-Deskriptor definiert den Zeilenabstand für die Schriftart. Dies ist die für die Schriftart empfohlene Zeilenabstand oder externe Lücke.

@font-face {
  font-family: "Line Gap Adjusted Arial";
  src: local(Arial);
  line-gap-override: 50%;
}

Die rote Überschrift (nicht angepasst) hat keine line-gap-override, sie befindet sich im Wesentlichen bei 0%, während die blaue Überschrift um 50 % vergrößert wurde, wodurch entsprechend Platz über und unter den Buchstaben entsteht.

Zusammenfassung

Jede dieser Überschreibungen bietet eine zusätzliche Möglichkeit, überschüssigen Text aus dem sicheren Text-Begrenzungsfeld des Webs zu entfernen. Sie können das Textfeld für eine präzise Präsentation anpassen.

Fazit

Mit der CSS-Funktion @font-face size-adjust können Sie den Text-Begrenzungsrahmen Ihrer Weblayouts anpassen, um das Schriftwechselerlebnis zu verbessern und so Layoutänderungen für Ihre Nutzer zu vermeiden. Weitere Informationen finden Sie in den folgenden Ressourcen:

• CSS Fonts Level 5-Spezifikation
• Größenanpassung auf der MDN
• Seamless Swap @font-face-Generator
• Cumulative Layout Shift (CLS) auf web.dev
• Eine neue Möglichkeit, die Auswirkungen des Schriftarten-Ladens zu reduzieren: CSS-Schriftart-Beschreibungen

Foto von Kristian Strand auf Unsplash