Mit der font-optical-sizingCSS-Eigenschaft kann der Browser den Umriss von Schriftzeichen anpassen, um sie bei verschiedenen Größen besser lesbar zu machen. Beispielsweise kann kleinerer Text einen dickeren Umriss erhalten, um den Kontrast zu erhöhen. Auf der anderen Seite kann größerer Text etwas „Feineres“ erhalten, um die Spezifikation zu zitieren.
.element ( font-optical-sizing: none; )Glyphen haben Umrisse?
Tun sie! Tatsächlich haben alle Glyphen sie und sie skalieren mit der Größe der Schriftart. Das Problem ist, dass ein superdünner Umriss bei einer winzigen Schriftgröße möglicherweise nicht genügend Kontrast für die beste Lesbarkeit bietet. In ähnlicher Weise können dickere Konturen bei größeren Größen zu viel Gewicht und Kontrast haben. font-optical-sizingversucht dies zu korrigieren, indem der Browser an der Gliederung herumspielen kann, damit sie in verschiedenen Maßstäben besser liest. Das Ergebnis ist gestochen scharfer Text und je nach Schriftgröße entweder schmalere oder breitere Textlängen.
Dies funktioniert nur bei Schriftarten, die die optische Größe unterstützen
Die Schriftarten, die die optische Größenbestimmung unterstützen, sind variable Schriftarten , einschließlich Roboto Delta, einer variablen Version von Googles klassischem Roboto. Eine weitere unterstützende Schriftart ist Amstelvar. Beide Schriftarten werden von Type Network verwaltet.
Selbst wenn eine Schriftart variabel ist, muss sie die optische Größenbestimmung als Feature explizit unterstützen.
Eine andere Möglichkeit, Schriftgrößen optisch zu dimensionieren
Die font-optical-sizingEigenschaft ist die effizienteste Methode, um eine Schriftart, die sie unterstützt, optisch in der Größe anzupassen. Eine andere Möglichkeit besteht darin, die font-variation-settingsEigenschaft zu verwenden, mit der Sie die optische Größe steuern können. Dies opszist das Schlüsselwort für die optische Größe für variable Schriftarten, die dies unterstützen.
Beachten Sie, font-variation-settingsdass Sie für die Verwendung opszdie Schriftgröße entsprechend einstellen müssen, damit alles richtig skaliert.
.element ( font-size: 18px; font-variation-settings: 'opsz', 18; )Syntax
font-optical-sizing: auto | none;- Initiale:
auto - Gilt für: alle Elemente
- Geerbt: ja
- Berechneter Wert: angegebenes Schlüsselwort
- Animationstyp: diskret
Werte
auto: Dies ist der Standardwert. Es ermöglicht Browsern, Text in verschiedenen Schriftgrößen für die Lesbarkeit zu optimieren.none: Dies verhindert, dass Browser Text ändern.
Die Eigenschaft akzeptiert auch globale Schlüsselwort Werte, einschließlich inherit, initialund unset.
Demo
Browser-Unterstützung
| IE | Kante | Feuerfuchs | Chrom | Safari | Oper |
|---|---|---|---|---|---|
| Nein | 17+ | 62+ | 79+ | 11+ | 66+ |
| Android Chrome | Android Firefox | Android Browser | iOS Safari | Opera Mini |
|---|---|---|---|---|
| 85+ | 79+ | 81+ | 11+ | Alle |
Weiterführende Literatur
- CSS Fonts Module Level 4 (Entwurf des Herausgebers)
- MDN-Dokumentation
- Variable Schriftarten: Optische Größe, benutzerdefinierte Achsen und andere Besonderheiten (Responsive Web Typography)