CSS-Eigenschaft font-size-adjust

Die Eigenschaft font-size-adjust steuert, wie die Schriftgröße berechnet wird, wenn eine Ausweichschrift verwendet wird. Sie stellt sicher, dass die x-Höhe der Ausweichschrift der x-Höhe der Primärschrift entspricht, um eine konsistente Lesbarkeit zu gewährleisten.

Die Eigenschaft font-size-adjust ist eine CSS2.1-Eigenschaft.

Alle Schriftarten verfügen über einen „Seitenverhältniswert“, der das Verhältnis der x-Höhe zur em-Höhe angibt. Dieser Wert kann in der Schriftartendokumentation nachgelesen oder mit Online-Tools berechnet werden. Beispielsweise hat Georgia einen Wert von ca. 0,52, während Verdana bei etwa 0,58 liegt.

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

Hinweis: font-size-adjust gilt in der modernen Webentwicklung als veraltet. Firefox hat die Unterstützung in Version 119 (2023) entfernt, und Chrome, Safari sowie Edge haben es nie unterstützt. Für moderne Alternativen sollten Sie font-optical-sizing oder das manuelle Anpassen von font-size mit Media Queries in Betracht ziehen.

Syntax

Syntax der CSS-Eigenschaft font-size-adjust

css

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

Beispiel für die font-size-adjust-Eigenschaft:

Beispiel der CSS-Eigenschaft font-size-adjust mit Zahlenwert

html

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document </title>
    <style>
      div.a {
        font-family: Georgia, Verdana, sans-serif;
      }
      div.b {
        font-family: Verdana, Georgia, sans-serif;
      }
      #box-one,
      #box-two {
        font-size-adjust: 0.52;
      }
    </style>
  </head>
  <body>
    <h1>Font-size-adjust property example</h1>
    <h2>Two divs with the same font-size-adjust property:</h2>
    <div id="box-one" class="a">
      This demonstrates how the primary font renders when available.
    </div>
    <div id="box-two" class="b">
      Here the fallback font takes precedence in the font stack.
    </div>
    <h2>Two divs without the font-size-adjust property:</h2>
    <div class="a">
      Without adjustment, the fallback font may appear significantly larger or smaller.
    </div>
    <div class="b">
      The font-size-adjust property ensures visual consistency across different typefaces.
    </div>
  </body>
</html>

Try it Yourself »

Werte

Wert	Beschreibung
none	Keine Schriftgrößenanpassung. Dies ist der Standardwert der Eigenschaft.
number	Eine positive Zahl, die das Seitenverhältnis darstellt (x-Höhe geteilt durch em-Höhe).
initial	Legt fest, dass die Eigenschaft ihren Standardwert verwendet.
inherit	Erbt die Eigenschaft von ihrem übergeordneten Element.

Browser-Kompatibilität

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

Praxis

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

Sie steuert die Fettdruckstärke einer Schrift.Sie bewahrt die x-Höhe einer Schrift und stellt sicher, dass sie bei einer Änderung nicht verzerrt wird.Sie passt die Farbe der Schrift an.Sie stellt sicher, dass die Lesbarkeit von Kleinbuchstaben beim Schriftwechsel erhalten bleibt.Sie passt die Schriftgröße an die Breite des Viewports an.

CSS-Eigenschaft font-size-adjust ​

Syntax ​

Beispiel für die font-size-adjust-Eigenschaft: ​

Werte ​