font-smooth
Nicht standardisiert: Diese Funktion ist nicht standardisiert. Wir raten davon ab, nicht-standardisierte Funktionen auf produktiven Webseiten zu verwenden, da sie nur von bestimmten Browsern unterstützt werden und sich in Zukunft ändern oder entfernt werden können. Unter Umständen kann sie jedoch eine geeignete Option sein, wenn es keine standardisierte Alternative gibt.
Die font-smooth-Eigenschaft in CSS steuert die Anwendung von Anti-Aliasing, wenn Schriftarten gerendert werden.
Syntax
/* Keyword values */
font-smooth: auto;
font-smooth: never;
font-smooth: always;
/* <length> value */
font-smooth: 2em;
/* Global values */
font-smooth: inherit;
font-smooth: initial;
font-smooth: revert;
font-smooth: revert-layer;
font-smooth: unset;
Hinweis:
WebKit implementiert eine ähnliche Eigenschaft, jedoch mit unterschiedlichen Werten: -webkit-font-smoothing. Sie funktioniert nur auf macOS.
auto- Der Browser entscheidet (Verwendet Subpixel-Anti-Aliasing, wenn verfügbar; dies ist der Standardwert)none- Schaltet die Kantenglättung aus; Text wird mit gezackten, scharfen Kanten angezeigt.antialiased- Glättet die Schrift auf der Ebene des Pixels im Gegensatz zum Subpixel. Der Wechsel von Subpixel-Rendering zu Anti-Aliasing für helle Texte auf dunklen Hintergründen lässt sie heller erscheinen.subpixel-antialiased- Auf den meisten Nicht-Retina-Displays sorgt dies für den schärfsten Text.
Hinweis:
Firefox implementiert eine ähnliche Eigenschaft, jedoch mit unterschiedlichen Werten: -moz-osx-font-smoothing. Sie funktioniert nur auf macOS.
auto- Erlaubt dem Browser, eine Optimierung für die Schriftglättung auszuwählen, typischerweisegrayscale.grayscale- Rendert Text mit Graustufen-Anti-Aliasing im Gegensatz zum Subpixel. Der Wechsel von Subpixel-Rendering zu Anti-Aliasing für helle Texte auf dunklen Hintergründen lässt sie heller erscheinen.
Formale Definition
| Anfangswert | auto |
|---|---|
| Anwendbar auf | alle Elemente |
| Vererbt | Ja |
| Berechneter Wert | wie angegeben |
| Animationstyp | diskret |
Formale Syntax
Parse error: Expected >Beispiele
Grundlegendes Anwendungsbeispiel
Das folgende Beispiel zeigt die Safari/Chromium- und Firefox-Äquivalente, die die Schriftglättung auf macOS aktivieren. In beiden Fällen sollte die geglättete Schrift etwas leichter im Gewicht erscheinen.
Für diejenigen unter Ihnen, die kein macOS-System verwenden, hier ein Screenshot (die Live-Version erscheint weiter unten):
HTML
<p>Without font smoothing</p>
<p class="smoothed">With font smoothing</p>
CSS
html {
background-color: black;
color: white;
font-size: 3rem;
}
p {
text-align: center;
}
.smoothed {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
Ergebnis
Spezifikationen
Nicht Teil eines Standards.
Browser-Kompatibilität
Loading…
Siehe auch
- Bitte hören Sie auf, die Schriftglättung zu "verbessern" von Dmitry Fadeyev (2012)
- Laissez-faire Schriftglättung und Anti-Aliasing von Zach Leatherman (2017)