CSS font-size-adjust Eigenschaft

Die Eigenschaft font-size-adjust bewahrt die Lesbarkeit von Text, wenn die primäre font-family nicht verfügbar ist und eine Ersatzschrift verwendet wird. Dazu zwingt sie den gerenderten Text, eine Ziel-x-Höhe beizubehalten, unabhängig davon, welche Schrift im Stack tatsächlich verwendet wird.

Warum die x-Höhe wichtig ist

Die x-Höhe ist die Höhe der Kleinbuchstaben (wie der Buchstabe „x"), gemessen von der Grundlinie. Die em-Höhe ist die volle Schriftgröße. Das Verhältnis zwischen beiden wird als Aspektwert der Schrift bezeichnet:

aspect value = x-height / em-height

Zwei Schriften, die mit derselben font-size gesetzt wurden, können in der Größe trotzdem auffällig unterschiedlich wirken, weil ihre Aspektwerte verschieden sind. Zum Beispiel wirkt Verdana (Aspektwert ~ 0,58) bei gleicher Punktgröße größer und lesbarer als Georgia (~ 0,52). Wenn also eine Ersatzschrift die primäre Schrift ersetzt, kann der substituierte Text zu groß oder zu klein wirken, obwohl sich font-size nicht geändert hat.

font-size-adjust behebt dieses Problem. Wenn ein Zahlenwert angegeben wird, skaliert der Browser die verwendete Schrift so, dass ihre x-Höhe diesem Wert multipliziert mit der aktuellen font-size entspricht. Die visuelle Größe der Kleinbuchstaben bleibt dann konstant, egal welche Schrift in der Fallback-Kette zum Einsatz kommt.

Ein praktischer Arbeitsablauf: Nehmen Sie den Aspektwert Ihrer bevorzugten (erstgewählten) Schrift und übergeben Sie ihn als Wert für font-size-adjust. Die Ersatzschriften werden dann so angepasst, dass sie dem Erscheinungsbild Ihrer bevorzugten Schrift entsprechen.

Anfangswert	none
Gilt für	Alle Elemente. Gilt auch für ::first-letter und ::first-line.
Vererbung	Ja.
Animierbar	Ja.
Version	CSS2.1
DOM-Syntax	object.style.fontSizeAdjust = "0.5";

Hinweis: Die Browserunterstützung für font-size-adjust ist schlecht. Firefox unterstützte die Eigenschaft bis Version 118, entfernte sie dann in Version 119 (2023), und sie wurde nie in Chrome, Safari oder Edge implementiert. In der Praxis kann man sich nicht mehr darauf verlassen. Der robusteste moderne Ansatz ist, Schriften selbst zu hosten (damit der Fallback selten ausgelöst wird) und die Ersatzschrift mit den Deskriptoren size-adjust, ascent-override und descent-override innerhalb einer @font-face-Regel anzupassen.

Syntax

Syntax der CSS-Eigenschaft font-size-adjust

font-size-adjust: number | none | initial | inherit;

Beispiel der font-size-adjust-Eigenschaft

Im folgenden Beispiel fordern beide Absätze eine Schrift an, die wahrscheinlich nicht installiert ist ("Made Up Font"), und greifen auf sans-serif zurück. Der zweite Absatz fügt font-size-adjust hinzu, sodass sein Fallback-Text auf eine feste x-Höhe normiert wird. In einem Browser, der die Eigenschaft noch implementiert, ist der angepasste Absatz konsistenter lesbar:

<!DOCTYPE html>
<html>
  <head>
    <title>font-size-adjust example</title>
    <style>
      p {
        font-family: "Made Up Font", sans-serif;
        font-size: 20px;
      }
      .adjusted {
        font-size-adjust: 0.5;
      }
    </style>
  </head>
  <body>
    <h1>font-size-adjust</h1>
    <p>Without font-size-adjust: the fallback font keeps its own x-height.</p>
    <p class="adjusted">
      With font-size-adjust: 0.5 the fallback x-height is normalized.
    </p>
  </body>
</html>

Probier es selbst »

Werte

Wert	Beschreibung
none	Keine Anpassung der Schriftgröße. Dies ist der Standardwert der Eigenschaft.
number	Eine positive Zahl, die das Aspektverhältnis darstellt (x-Höhe dividiert durch em-Höhe).
initial	Setzt die Eigenschaft auf ihren Standardwert zurück.
inherit	Erbt die Eigenschaft vom übergeordneten Element.

Browser-Kompatibilität

Browser	Unterstützung
Chrome	Keine Unterstützung
Firefox	1.5–118 (entfernt in v119)
Safari	Keine Unterstützung
Edge	Keine Unterstützung
Opera	Keine Unterstützung

Übung

Was ist die Hauptfunktion der Eigenschaft 'font-size-adjust' in CSS?

Sie steuert die Fettigkeit einer Schrift.Sie bewahrt die x-Höhe einer Schrift und stellt sicher, dass sie beim Wechsel nicht verzerrt wird.Sie passt die Farbe der Schrift an.Sie stellt sicher, dass die Lesbarkeit der Kleinbuchstaben beim Schriftwechsel erhalten bleibt.Sie passt die Schrift an die Breite des viewports an.

Siehe auch

CSS font-size Eigenschaft — legt die tatsächliche Größe des Textes fest.
CSS font-family Eigenschaft — definiert den Schrift-Stack und seine Fallbacks.
CSS @font-face Regel — lädt benutzerdefinierte Schriften und passt Fallbacks mit size-adjust an.
CSS font Kurzschreibweise — setzt mehrere Schrift-Eigenschaften auf einmal.