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

Beim Laden einer Webschriftart können Sie jetzt die Größe anpassen, um die Schriftgrößen des Dokuments zu normalisieren und Layoutverschiebungen beim Wechseln zwischen Schriftarten zu verhindern.

Adam Argyle

Sehen Sie sich die folgende Demo an, in der font-size ein konsistenter 64px ist und der einzige Unterschied zwischen diesen Headern das font-family ist. 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 verschiedene Möglichkeiten aufgezeigt, wie sich Schriftgrößen korrigieren und normalisieren lassen, um eine reibungslosere Nutzererfahrung, einheitliche Designsysteme und vorhersehbares Seitenlayout zu ermöglichen. Ein wichtiger Anwendungsfall ist die Optimierung des Renderings von Webschriftarten, um Cumulative Layout Shift (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. Optisch überschaubare Inhaltsveränderungen.
3. Interaktive Zielbereiche werden verschoben (das Drop-down-Menü springt!)

Schriftarten mit size-adjust skalieren

Eine 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 das einzelne importierte Schriftbild aus.

Verwenden Sie die oben beschriebene benutzerdefinierte Schriftart so:

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

CLS mit nahtlosem Austausch von Schriftarten reduzieren

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 Titelelement und das Problem ist sehr auffällig.

Eine gute Methode zur Verbesserung des Renderings von Schriftarten ist das Wechseln von Schriftarten. 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 zu lange auf die Inhalte warten müssen. 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 Wechsel kannst du diesen Rechner zur Größenanpassung von Malte Ubl von Hand anpassen oder ausprobieren.

Zu Beginn dieses Beitrags wurde das Problem mit der Schriftgröße durch "Versuch und Irrtum" 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 die Darstellung auf Times, Arial oder eine Systemschriftart normalisieren und dann die benutzerdefinierten Schriftarten 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 Schriftart im Remote-Quellcode entspricht. Ziel der Kalibrierung ist eine benutzerdefinierte Remote-Schriftart, etwa eine Markenschriftart:

@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 sind tolle Neuigkeiten für Designsysteme.

Auch die Verwendung einer Markenschrift als Ziel ist die Art und Weise, wie der Maltes Rechner funktioniert. Wenn Sie eine Google-Schriftart auswählen, wird berechnet, wie Arial für einen nahtlosen Austausch mit der Schriftart angepasst wird. Hier ist ein Beispiel für Roboto-CSS aus dem Rechner, in dem 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;
}

Der Vorteil dieser Strategie besteht darin, dass das Rendering ohne Anpassungen erfolgt und dann eingehende Schriftarten entsprechend angepasst werden.

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

Wenn die allgemeine Skalierung von Symbolen für das Design oder die Ladestrategien nicht ausreicht, findest du hier einige Feinabstimmungsoptionen, die in Verbindung mit size-adjust funktionieren. Die Properties ascent-override, descent-override und line-gap-override sind derzeit in Chromium 87 und höher und Firefox 89 und höher implementiert.

ascent-override

Der Deskriptor ascent-override definiert die Höhe über der Grundlinie einer Schriftart.

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

Der rote Anzeigentitel (nicht angepasst) hat Platz über dem Großbuchstaben A und O. Die blaue Überschrift wurde jedoch so angepasst, dass die Höhe der Kappe gut an den Begrenzungsrahmen anliegt.

descent-override

Der Deskriptor descent-override definiert die Höhe unterhalb der Grundlinie der Schriftart.

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

Der rote Anzeigentitel (nicht angepasst) hat Platz unter der D- und O-Basislinie, während die blaue Überschrift so angepasst wurde, dass die Buchstaben gut an der Basislinie anliegen.

line-gap-override

Der line-gap-override-Deskriptor definiert den Zeilenabstand für die Schrift. 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%;
}

Der rote Anzeigentitel (nicht angepasst) hat kein line-gap-override und befindet sich im Wesentlichen bei 0%. Der blaue Anzeigentitel wurde um 50 % angepasst, sodass über und unter den Buchstaben Platz bleibt.

Zusammenfassung

Jede dieser Überschreibungen bietet eine zusätzliche Möglichkeit, Überschreitungen des sicheren Textbegrenzungsrahmens im Web 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-Schriftarten – Spezifikation Stufe 5
• Größenanpassung auf MDN
• Seamless Swap @font-face-Generator
• Cumulative Layout Shift (CLS) auf web.dev
• Eine neue Möglichkeit, die Auswirkungen des Ladens von Schriftarten zu reduzieren: CSS-Schriftbeschreibungen

Foto von Kristian Strand auf Unsplash