Wenn Webschriftarten geladen werden, ersetzen sie oft eine Fallback-Schriftart mit anderen Abmessungen, auch wenn beide auf dieselbe font-size eingestellt sind. Dies führt zu einer „Layoutverschiebung“ (Cumulative Layout Shift) und kann dazu führen, dass Text unleserlich wird, wenn sich die Kleinbuchstaben (x-Höhe) des Fallbacks erheblich von der bevorzugten Schriftart unterscheiden.
Die Property font-size-adjust löst dieses Problem, indem sie die Größe der Schriftart anhand eines bestimmten Messwerts (normalerweise der x-Höhe) normalisiert. So wird sichergestellt, dass der Text unabhängig von der aktuell aktiven Schriftart denselben visuellen Platz einnimmt.
Implementierungsschritte
1. Seitenverhältnis der bevorzugten Schriftart ermitteln
Zum Normalisieren von Fallbacks benötigen Sie den „Seitenverhältniswert“ (das Verhältnis von Kleinbuchstaben zur Schriftgröße) Ihrer primären Schriftart.
- Automatische Erkennung (empfohlen): Verwende das Keyword
from-font, damit der Browser das Verhältnis aus deiner primären Webschriftart extrahieren kann. - Manuelle Berechnung: Wenn Sie den genauen Wert kennen (z. B. 0,545 für Verdana), können Sie ihn direkt angeben, um eine genauere Steuerung zu ermöglichen.
2. „font-size-adjust“ auf den Textcontainer anwenden
Wenden Sie das Attribut auf das Element oder einen übergeordneten Container an. So wird sichergestellt, dass die Fallback-Schriftart auf die visuelle Größe der primären Schriftart skaliert wird, wenn die primäre Schriftart nicht geladen werden kann oder gerade geladen wird.
.text-content {
/* Define your font stack as usual */
font-family: "MyWebFont", "Arial", sans-serif;
font-size: 1rem;
/* MANDATORY: Normalize the font size based on the primary font's x-height.
This ensures that if 'Arial' is used as a fallback, it is scaled
to match the x-height of 'MyWebFont'. */
font-size-adjust: from-font;
}
3. (Optional) Anpassung für bestimmte Messwerte
Die x-Höhe ist zwar die Standardeinstellung und am häufigsten verwendet, Sie können aber auch nach anderen Messwerten normalisieren, z. B. cap-height (nützlich für Überschriften in Großbuchstaben) oder ch-width (nützlich für Schriftarten mit fester Breite).
h1 {
/* Normalize based on the height of capital letters */
font-size-adjust: cap-height from-font;
}
4. Visuelle Stabilität prüfen
Achten Sie darauf, dass der Wert font-size-adjust den Fallback korrekt ausrichtet. Sie können das testen, indem Sie die Webschriftart vorübergehend blockieren oder die font-family-Deklaration in den Entwicklertools Ihres Browsers anpassen und prüfen, ob das Textlayout stabil bleibt.
Fallback-Strategien
In Browsern, die font-size-adjust nicht unterstützen, wird die Schriftart in ihrer Standardskalierung gerendert. Dies kann zu Layoutverschiebungen oder Änderungen der Lesbarkeit während des Schriftartwechsels führen.
Um dieses Problem ohne font-size-adjust zu beheben, können Sie die @font-face-Deskriptoren size-adjust, ascent-override und descent-override verwenden, um Fallback-Schriftarten manuell anzupassen. Diese sind jedoch komplexer zu berechnen als ein einzelner font-size-adjust-Wert.