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

Beim Laden einer Webschriftart können Sie jetzt die Skalierung anpassen, um die Schriftgrößen im Dokument zu normalisieren und Layoutverschiebungen beim Wechsel zwischen Schriftarten zu verhindern.

Adam Argyle

Sehen Sie sich die folgende Demo an, in der der font-size ein konsistenter 64px ist und der einzige Unterschied zwischen den einzelnen Headern der font-family ist. Die Beispiele auf der linken Seite wurden nicht angepasst und haben eine uneinheitliche Endgröße. In den Beispielen rechts wird size-adjust verwendet, um sicherzustellen, dass 64px die einheitliche endgültige Größe ist.

In diesem Beispiel werden die Debugging-Tools für das CSS-Rasterlayout der Chrome-Entwicklertools verwendet, um Höhen anzuzeigen.

In diesem Beitrag wird ein neuer CSS-Schriftartdeskriptor namens size-adjust vorgestellt. Außerdem werden einige Möglichkeiten zur Korrektur und Normalisierung von Schriftgrößen aufgezeigt, um die Nutzerfreundlichkeit zu verbessern, Designsysteme konsistent zu gestalten und das Seitenlayout vorhersehbarer zu machen. Ein wichtiger Anwendungsfall ist die Optimierung des Web-Schriftarten-Renderings, um kumulative Layoutverschiebungen (CLS) zu verhindern.

Browser Support

• 92
• 92
• 92
• 17

Source

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

1. Die Höhenunterschiede in den Ergebnissen.
2. Visuell störende Inhaltsverschiebungen.
3. Sich bewegende interaktive Zielbereiche (das Drop-down-Menü springt hin und her).

Schlüsselbegriff: Schriftfamilie vs. Schriftbild: Ein Schriftbild wird durch den Namen der Schriftfamilie und den Schriftschnitt bezeichnet. Helvetica Bold bezieht sich auf die spezifische fette Schriftart, während sich Helvetica allgemein auf die gesamte Familie von mehr als 8 Schriftarten (normal, fett, kursiv usw.) bezieht. In CSS @font-face geht es um Schriftarten, auch wenn Sie font-family schreiben müssen, um sie zu verwenden.

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. Verwendet size-adjust, um jede Glyphe auf 150 % ihrer Standardgröße zu skalieren.
3. Betrifft nur die einzelne importierte Schriftart.

Verwenden Sie die oben genannte benutzerdefinierte Schriftart so:

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

Warnung: Wenn die zweite Überschrift in der Demo oben nicht größer als die erste ist, unterstützt Ihr Browser size-adjust nicht.

CLS durch nahtlosen Schriftartwechsel reduzieren

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

Das Beispiel links hat eine Layoutverschiebung, das Beispiel rechts nicht.

Eine gute Methode zur Verbesserung des Schriftarten-Renderings ist der Schriftartenaustausch. Rendern Sie eine schnell ladende Systemschriftart, um den Inhalt zuerst anzuzeigen, und tauschen Sie sie dann gegen eine Webschriftart aus, wenn die Webschriftart vollständig geladen ist. So erhaltet ihr das Beste aus beiden Welten: Der Inhalt ist so schnell wie möglich sichtbar und ihr erhaltet eine ansprechend gestaltete Seite, ohne dass die Nutzer zu lange auf den Inhalt warten müssen. Das Problem ist jedoch, dass sich beim Laden der Webschriftart manchmal die gesamte Seite verschiebt, da sie eine etwas andere Boxhöhe hat.

Je mehr Inhalte, desto mehr potenzielle Layoutverschiebungen beim Schriftartwechsel

Wenn Sie size-adjust in die @font-face-Regel einfügen, wird eine globale Glyphenanpassung für die Schriftart festgelegt. Wenn Sie das Timing richtig wählen, ist die visuelle Veränderung minimal und der Wechsel nahtlos. Wenn du einen nahtlosen Übergang schaffen möchtest, kannst du die Größe manuell anpassen oder den Rechner zur Größenanpassung von Malte Ubl verwenden.

Wählen Sie eine Google-Webschriftart aus und Sie erhalten ein voreingestelltes @font-face-Snippet.

Am Anfang dieses Beitrags wurde das Problem mit der Schriftgröße durch Ausprobieren behoben. size-adjust wurde im Quellcode so lange angepasst, bis derselbe Header in Cookie und Arial dieselbe 64px wie Press Start 2P auf natürliche Weise gerendert hat. Ich habe zwei Schriftarten an einer 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 werden kalibriert

Als Autor bestimmen Sie die Kalibrierungsziele für die Normalisierung der Schriftgröße. Sie können Times, Arial oder eine Systemschriftart als Standard festlegen und dann benutzerdefinierte Schriftarten entsprechend anpassen. Oder Sie passen lokale Schriftarten an die heruntergeladenen Schriftarten an.

Strategien für die size-adjust-Kalibrierung:

1. Remote-Ziel:
   Lokale Schriftarten werden an heruntergeladene Schriftarten angepasst.
2. Lokales Ziel:
   Heruntergeladene Schriftarten werden an lokale Zielschriftarten angepasst.

Beispiel 1: Remote-Ziel

Im folgenden Snippet wird eine lokal verfügbare Schriftart an die Größe einer benutzerdefinierten Schriftart aus einer Remote-Quelle angepasst. Eine benutzerdefinierte Remote-Schriftart ist das Ziel für die Kalibrierung, vielleicht 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 in Erwartung einer geladenen benutzerdefinierten Schriftart angepasst, um einen nahtlosen Wechsel zu ermöglichen.

Diese Strategie hat den Vorteil, dass Designern und Entwicklern dieselbe Schriftart für die Größenanpassung und Typografie zur Verfügung steht. Die Marke ist das Kalibrierungsziel. Das sind großartige Neuigkeiten für Designsysteme.

Auch der Rechner von Malte verwendet eine Markenschriftart als Ziel. Wählen Sie eine Google Fonts aus und es wird berechnet, wie Arial angepasst werden muss, um nahtlos mit ihr ausgetauscht zu werden. 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");
}

Warnung: Die Reihenfolge von font-family ist entscheidend. Hier werden Reihenfolge und Priorität festgelegt. Die Schriftart, die Sie am meisten bevorzugen, sollte an erster Stelle stehen. Außerdem ist local(Arial) möglicherweise nicht auf allen Geräten Ihrer Nutzer verfügbar. Daher ist es wichtig, mehrere Fallbacks in der Schriftfamilie anzugeben.

Im folgenden Beispiel wird eine vollständig plattformübergreifende Anpassung erstellt. Es werden zwei angepasste lokale Fallback-Schriftarten für eine Markenschriftart bereitgestellt.

@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

Im folgenden Snippet wird eine benutzerdefinierte Markenschriftart 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 entsprechend angepasst werden.

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

Wenn die allgemeine Skalierung von Glyphen für deine Design- oder Ladestrategien nicht ausreicht, gibt es einige Optionen zur Feinabstimmung, die mit size-adjust funktionieren. Die Properties ascent-override, descent-override und line-gap-override sind derzeit in Chromium 87+ und Firefox 89+ implementiert.

ascent-override

Browser Support

• 87
• 87
• 89
• 

Source

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%;
}

Die rote Überschrift (nicht angepasst) hat über den Großbuchstaben „A“ und „O“ Platz, während die blaue Überschrift so angepasst wurde, dass die Versalhöhe genau in den Begrenzungsrahmen passt.

descent-override

Browser Support

• 87
• 87
• 89
• 

Source

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

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

Unter der roten Überschrift (nicht angepasst) ist Platz unter den Grundlinien von D und O, während die blaue Überschrift so angepasst wurde, dass die Buchstaben genau auf der Grundlinie liegen.

line-gap-override

Browser Support

• 87
• 87
• 89
• 

Source

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

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

Die rote Überschrift (nicht angepasst) hat keinen line-gap-override, also im Grunde 0%, während die blaue Überschrift um 50 % nach oben angepasst wurde, wodurch über und unter den Buchstaben Platz geschaffen wurde.

Zusammenfassung

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

Warnung: Wenn in einer der oben genannten Demos keine Unterschiede zu sehen sind, unterstützt Ihr Browser die Überschreibungen nicht.

Fazit

Die CSS-Funktion @font-face size-adjust ist eine interessante Möglichkeit, den Textbegrenzungsrahmen Ihrer Weblayouts anzupassen, um den Schriftartenaustausch zu verbessern und so Layoutverschiebungen für Ihre Nutzer zu vermeiden. Weitere Informationen finden Sie in den folgenden Ressourcen:

• Spezifikation für CSS Fonts Level 5
• Größenanpassung auf MDN
• Nahtloser @font-face-Generator für den Austausch
• Cumulative Layout Shift (CLS) auf web.dev (in englischer Sprache)
• A New Way To Reduce Font Loading Impact: CSS Font Descriptors