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 links wurden nicht angepasst und eine inkonsistente endgültige Größe haben. 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 das Seitenlayout vorhersehbarer zu machen. 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

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 ein benutzerdefiniertes Schriftbild 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 obige benutzerdefinierte Schriftart wie folgt:

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

CLS durch nahtlosen Austausch von Schriftarten reduzieren

Im folgenden GIF sehen Sie die Beispiele auf der linken Seite und die Verschiebung. wenn die Schriftart geändert wird. Dies ist nur ein kleines Beispiel mit einem einzigen Titelelement und das Problem ist sehr auffällig.

Zur Verbesserung der Schriftartdarstellung bietet es sich an, Schriftarten Datenaustausch. 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. Das ist das Beste aus beiden Welten: Ihre Inhalte so schnell wie möglich sichtbar sind und Sie eine ansprechend gestaltete Seite erhalten, die Zeit Ihrer Nutzer für Inhalte zu opfern. Das Problem ist jedoch, beim Laden der Webschriftart verschieben, verschoben sie die gesamte Seite, hat die Größe des Feldes.

Wenn Sie size-adjust in die @font-face-Regel aufnehmen, wird ein globales Symbol festgelegt für die Schriftart anpassen. Das richtige Timing führt zu minimalen ein nahtloser Wechsel. 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 einen Testlauf und Fehler. 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 auf Times, Arial oder eine Systemschriftart normalisieren und dann benutzerdefinierte Schriftarten anpassen. Oder Sie passen lokale Schriftarten an Ihre Downloads an.

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. Eine Remote-Schriftart ist das Ziel für eine Markenschriftart wie etwa

@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 für ein nahtlose Tausch.

Diese Strategie hat den Vorteil, dass Designschaffende und Entwickelnde dieselben für die Größe und Typografie. Die Marke ist das Kalibrierungsziel. Dies ist gute Neuigkeiten 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 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

Sehen Sie sich das folgende Snippet an, mit dem eine benutzerdefinierte Markenschrift an Arial angepasst wird:

@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 ascent-override, descent-override, und line-gap-override -Eigenschaften werden derzeit in Chromium 87+ und Firefox 89+ 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 der empfohlene Zeilenabstand oder eine externe Führungslinie.

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

Der rote Anzeigentitel (nicht angepasst) enthält keine line-gap-override, im Grunde befindet er 0%, während der blaue Anzeigentitel um 50 % angepasst wurde, sodass Platz darüber und unterhalb der Buchstaben.

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 diesen Ressourcen:

• CSS-Schriftarten – Stufe 5 Technische Daten
• Größenanpassung aktiviert MDN
• Seamless Swap @font-face-Generator
• Cumulative Layout Shift (CLS) auf web.dev
• Eine neue Möglichkeit, die Auswirkungen des Ladens von Schriftarten zu verringern: CSS-Schriftbeschreibungen

Foto von Kristian Strand auf Unsplash