font-optical-sizing

Die CSS-Eigenschaft font-optical-sizing ermöglicht es dem Browser, die Kontur von Schriftzeichen anzupassen, um sie bei unterschiedlichen Größen besser lesbar zu machen. Kleinere Texte erhalten beispielsweise möglicherweise eine dickere Kontur, um ihren Kontrast zu erhöhen. Umgekehrt kann größerer Text etwas „feiner“ sein, um die Spezifikation zu zitieren.

.element {
  font-optical-sizing: none;
}

Haben Glyphen Konturen?

Das tun sie! Tatsächlich haben alle Glyphen Konturen, und sie skalieren mit der Schriftgröße. Das Problem ist, dass eine sehr dünne Kontur bei einer winzigen Schriftgröße möglicherweise nicht genügend Kontrast für die beste Lesbarkeit bietet; ebenso können dickere Konturen bei größeren Größen zu viel Gewicht und Kontrast haben. font-optical-sizing versucht, dies zu korrigieren, indem es dem Browser erlaubt, die Kontur zu optimieren, damit sie bei verschiedenen Skalierungen besser lesbar ist. Das Ergebnis wird schärferer Text und je nach Schriftgröße entweder schmalere oder breitere Textlängen sein.

Dies funktioniert nur bei Schriften, die optische Größenunterstützung bieten

Und die Schriften, die optische Größenunterstützung bieten, sind **variable Schriften**, einschließlich Roboto Delta, eine variable Version von Googles klassischem Roboto. Eine weitere unterstützende Schrift ist Amstelvar. Beide Schriften werden von Type Network gepflegt.

Selbst wenn eine Schrift variabel ist, muss sie optische Größen als Funktion explizit unterstützen.

Eine andere Möglichkeit, Schriften optisch zu skalieren

Die Eigenschaft font-optical-sizing ist der effizienteste Weg, um eine unterstützte Schriftart optisch zu skalieren. Eine andere Möglichkeit ist die Verwendung der Eigenschaft font-variation-settings, mit der Sie die optische Skalierung mit opsz steuern können, dem Schlüsselwort für die optische Skalierung bei variablen Schriften, die dies unterstützen.

Beachten Sie, dass bei der Verwendung von font-variation-settings die opsz entsprechend der Schriftgröße eingestellt werden muss, damit alles richtig skaliert.

.element {
  font-size: 18px;
  font-variation-settings: 'opsz', 18;
}

Syntax

font-optical-sizing: auto | none;

• Initial: auto
• Gilt für: alle Elemente
• Vererbt: ja
• Berechneter Wert: angegebenes Schlüsselwort
• Animationstyp: diskret

Werte

• auto: Dies ist der Standardwert. Er ermöglicht es Browsern, Text bei verschiedenen Schriftgrößen für die Lesbarkeit zu optimieren.
• none: Dies verhindert, dass Browser Text ändern.

Die Eigenschaft akzeptiert auch globale Schlüsselwortwerte, einschließlich inherit, initial und unset.

Demo

Browser-Unterstützung

IE	Edge	Firefox	Chrome	Safari	Opera
Nein	17+	62+	79+	11+	66+

Android Chrome	Android Firefox	Android Browser	iOS Safari	Opera Mini
85+	79+	81+	11+	Alle

Weitere Lektüre

• CSS Fonts Module Level 4 (Editor's Draft)
• MDN-Dokumentation
• Variable fonts: Optical size, custom axes, and other curiosities (Responsive Web Typography)

Verwandte Eigenschaften