Wenn eine Webschriftart geladen wird, können Sie jetzt deren Skalierung anpassen, um die Schriftgrößen im Dokument zu normalisieren und Layoutverschiebungen beim Wechseln zwischen Schriftarten zu verhindern.
Sehen Sie sich die folgende Demo an, in der font-size ein konsistenter 64px ist und der einzige Unterschied zwischen den einzelnen 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 endgültige Größe hat.
In diesem Beitrag wird der neue CSS-Font-face-Deskriptor namens size-adjust beschrieben. Es zeigt auch einige Möglichkeiten zum Korrigieren und Normalisieren von Schriftgrößen für eine reibungslosere Nutzererfahrung, einheitliche Designsysteme und ein vorhersehbares Seitenlayout. Ein wichtiger Anwendungsfall ist die Optimierung des Renderings von Webschriftarten, um Cumulative Layout Shift (CLS) zu verhindern.
Hier ist eine interaktive Demo des Problembereichs. Ändern Sie die Schriftart im Dropdown-Menü und beobachten Sie:
- Die Höhenunterschiede in den Ergebnissen.
- Visuell verstörende Inhaltsverschiebungen.
- Interaktive Zielbereiche verschieben (das Drop-down-Menü springt hin und her!)
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');
}
- Erstellt ein benutzerdefiniertes Schriftbild mit dem Namen
Adjusted Typeface. - Verwendet
size-adjust, um jede Glyphe auf 150% ihrer Standardgröße zu skalieren. - Betrifft nur das einzelne importierte Schriftbild.
Verwenden Sie die obige benutzerdefinierte Schriftart wie folgt:
h1 {
font-family: "Adjusted Typeface";
}
CLS durch nahtlosen Austausch von Schriftarten verringern
Im folgenden GIF sehen Sie die Beispiele auf der linken Seite und sehen, wie sich beim Ändern der Schriftart eine Änderung ergibt. Dies ist nur ein kleines Beispiel mit einem einzigen Anzeigentitel-Element. Das Problem ist sehr auffällig.
Eine gute Methode zur Verbesserung des Schriftrendering ist das Austauschen der Schriftarten. Rendern Sie eine Systemschrift, die schnell lädt, sodass zuerst der Inhalt angezeigt wird. Ersetzen Sie sie anschließend durch eine Webschriftart, sobald die Webschrift geladen ist. So profitieren Sie von den Vorteilen beider Welten: Die Inhalte sind so schnell wie möglich sichtbar und Ihre Seite ist ansprechend gestaltet, ohne dass die Nutzer Zeit für die Inhalte aufwenden müssen. Das Problem besteht jedoch darin, dass beim Laden der Webschriftart manchmal die gesamte Seite verschoben wird, da sie eine etwas andere Feldhöhe hat.
Wenn Sie size-adjust in die @font-face-Regel aufnehmen, wird eine globale Glyphenanpassung für die Schriftart festgelegt. Das richtige Timing führt zu minimalen
visuellen Änderungen, also einem nahtlosen Austausch. Um einen nahtlosen Austausch zu ermöglichen, können Sie die Größe manuell anpassen oder diesen Rechner zur Größenanpassung von Malte Ubl ausprobieren.
@font-face-Snippet zurück.
Die Behebung des Schriftgrößenproblems am Anfang dieses Beitrags wurde durch Versuch und Irrtum umgesetzt. size-adjust wurde im Quellcode so lange daran erinnert, bis derselbe Header in Cookie und Arial dasselbe 64px wie Press Start 2P gerendert hat.
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
Sie als Autor legen die Kalibrierungsziele für die Normalisierung der Schriftgröße fest. Sie könnten nach Times, Arial oder einer Systemschrift normalisieren und dann benutzerdefinierte Schriftarten entsprechend anpassen. Sie können auch lokale Schriftarten an den Download anpassen.
Strategien für die size-adjust-Kalibrierung:
- Remote-Ziel:
Sie können lokale Schriftarten in Bezug auf heruntergeladene Schriftarten anpassen. - Lokales Ziel:
Passen Sie heruntergeladene Schriftarten an die lokalen Zielschriftarten an.
Beispiel 1: Remote-Ziel
Mit dem folgenden Snippet wird eine lokal verfügbare Schriftart an die Größe einer benutzerdefinierten Remote-src-Schriftart angepasst. Eine Remote-Benutzerdefinierte Schriftart ist das Ziel für die 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 Hinblick auf eine geladene benutzerdefinierte Schriftart für einen nahtlosen Austausch angepasst.
Diese Strategie hat den Vorteil, dass Designer und Entwickler dieselbe Schriftart für Größe und Typografie erhalten. Die Marke ist das Kalibrierungsziel. Das sind tolle Neuigkeiten für Designsysteme.
Maltes Rechner hat auch eine Schriftart als Ziel. Wenn Sie eine Google-Schriftart auswählen, wird für den nahtlosen Austausch berechnet, wie die Arial angepasst werden soll. Hier sehen Sie ein Beispiel für Roboto-CSS-Code aus dem Rechner, in dem Arial geladen wird und den Namen "Roboto-fallback" enthält:
@font-face {
font-family: "Roboto-fallback";
size-adjust: 100.06%;
src: local("Arial");
}
Im folgenden Beispiel sehen Sie eine vollständig plattformübergreifende Anpassung. Darin werden zwei angepasste lokale Fallback-Schriftarten in Erwartung einer Markenschrift dargestellt.
@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 Ziel
Sehen Sie sich das folgende Snippet an, mit dem eine benutzerdefinierte Schriftart für die Marke so angepasst wird, dass sie mit Arial übereinstimmt:
@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 keine Anpassungen vorgenommen werden und dann alle eingehenden Schriftarten entsprechend angepasst werden.
Präzisere Abstimmung mit ascent-override, descent-override und line-gap-override
Wenn die allgemeine Skalierung von Symbolen für Ihre Design- oder Ladestrategien nicht ausreicht, können Sie die folgenden Feinabstimmungsoptionen in Verbindung mit size-adjust optimieren. Die Eigenschaften ascent-override, descent-override und line-gap-override sind derzeit in Chromium 87 oder höher bzw. Firefox 89 und höher implementiert.
ascent-override
Der Deskriptor ascent-override definiert die Höhe über der Baseline 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. Der blaue Anzeigentitel wurde so angepasst, dass seine Höhe an der gesamten Begrenzungsrahmen angepasst wird.
descent-override
Der Deskriptor descent-override definiert die Höhe unter der Baseline der Schriftart.
@font-face {
font-family: "Ascent Adjusted Arial Bold";
src: local(Arial Bold);
descent-override: 0%;
}
Die rote Überschrift (nicht angepasst) hat Platz unter den Referenzlinien D und O. Die blaue Überschrift wurde so angepasst, dass die Buchstaben an der Grundlinie anliegen.
line-gap-override
Mit dem Deskriptor line-gap-override wird der Zeilenabstandsmesswert für die Schriftart definiert.
Dies ist die empfohlene Linienlücke oder externe führende Schriftart.
@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, im Grunde ist er 0%. Der blaue Anzeigentitel wurde um 50 % erhöht, wodurch entsprechend Platz über und unter den Buchstaben entsteht.
Zusammenfassung
Jede dieser Überschreibungen bietet eine weitere Möglichkeit, übermäßige Verwendung des sicheren Textbegrenzungsrahmens im Web zu entfernen. Sie können das Textfeld für eine präzise Darstellung anpassen.
Fazit
Die CSS-Funktion @font-face size-adjust ist eine interessante Möglichkeit, den Textbegrenzungsrahmen Ihrer Weblayouts anzupassen, um den Austausch von Schriftarten zu verbessern und so Layoutverschiebungen zu vermeiden. Weitere Informationen finden Sie in diesen Ressourcen:
- CSS-Schriftarten Level 5 – Spezifikation
- Größenanpassung über MDN
- @font-face-Generator
- Cumulative Layout Shift (CLS) auf web.dev
- Eine neue Möglichkeit, die Auswirkungen auf das Laden von Schriftarten zu reduzieren: CSS-Schriftartdeskriptoren
Foto von Kristian Strand auf Unsplash