font-size-adjust

Diese Eigenschaft gibt Entwicklern die Möglichkeit, die font-size eines Elements basierend auf der Größe seiner Kleinbuchstaben und nicht der Großbuchstaben festzulegen.

.element {
  font-size: 22px;
  font-size-adjust: .5;
}

In diesem Fall wären die Kleinbuchstaben der Schrift 11 Pixel hoch, da 22 x 0,5 = 11.

Beim Laden von Schriftarten besteht wahrscheinlich ein anderes Seitenverhältnis zwischen den Kleinbuchstaben einer Fallback-Schriftart und der neu geladenen Typografie. Daher ist font-size-adjust nützlich, um das Ausmaß des Umbruchs zu steuern, wenn wir eine neue font-family deklarieren und den Flash of Unstyled Text (FOUT) sehen.

In der folgenden Demo ist es möglich, diese Eigenschaft ein- und auszuschalten, um zu zeigen, wie sich eine Webfont wie Chaparral von der x-Höhe und Ausrichtung der Zeichen in Times, der Fallback-Schriftart, unterscheidet. Aber Vorsicht, diese Eigenschaft wird derzeit nur von einer kleinen Anzahl von Browsern unterstützt.

Dies kann dramatische Auswirkungen haben, wenn es auf große Textblöcke angewendet wird, und das Flackern, das beim Wechsel zwischen Fallback und der neu geladenen Schriftart auftritt, erheblich verbessern.

Weitere Informationen

• MDN
• W3C

Browser-Unterstützung