font-smooth CSS property
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 CSS-Eigenschaft steuert die Anwendung von Anti-Aliasing bei der Schriftdarstellung.
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 anderen Werten: -webkit-font-smoothing. Diese funktioniert nur auf macOS.
auto- Dem Browser die Entscheidung überlassen (Verwendet Subpixel-Anti-Aliasing, wenn verfügbar; dies ist der Standardwert).none- Schriftdarstellungsglättung ausschalten; 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 hellen Text auf dunklen Hintergründen lässt ihn heller erscheinen.subpixel-antialiased- Auf den meisten Nicht-Retina-Displays ergibt dies den schärfsten Text.
Hinweis:
Firefox implementiert eine ähnliche Eigenschaft, jedoch mit anderen Werten: -moz-osx-font-smoothing. Diese funktioniert nur auf macOS.
auto- Dem Browser erlaubt eine Optimierung für das Schriftglätten auszuwählen, typischerweisegrayscale.grayscale- Rendert Text mit Graustufen-Anti-Aliasing, im Gegensatz zum Subpixel. Der Wechsel von Subpixel-Rendering zu Anti-Aliasing für hellen Text auf dunklen Hintergründen lässt ihn heller erscheinen.
Formale Definition
| Anfangswert | auto |
|---|---|
| Anwendbar auf | alle Elemente |
| Vererbt | Ja |
| Berechneter Wert | wie angegeben |
| Animationstyp | diskret |
Formale Syntax
font-smooth =
auto |
never |
always |
<absolute-size> |
<length>
<absolute-size> =
xx-small |
x-small |
small |
medium |
large |
x-large |
xx-large |
xxx-large
Beispiele
Grundlegendes Anwendungsbeispiel
Das folgende Beispiel zeigt die Äquivalente in Safari/Chromium und Firefox, die das Schriftglätten auf macOS einschalten. In beiden Fällen sollte die geglättete Schrift etwas leichter im Gewicht erscheinen.
Für diejenigen, die sich nicht auf einem macOS-System befinden, hier ist ein Screenshot (die Live-Version erscheint später):
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
Teil keiner Norm.
Browser-Kompatibilität
Siehe auch
- Please Stop "Fixing" Font Smoothing von Dmitry Fadeyev (2012)
- Laissez-faire font smoothing and anti-aliasing von Zach Leatherman (2017)
- Improve text rendering (A Modern CSS Reset) von Josh W. Comeau (2021)
- What's the deal with WebKit Font Smoothing? von David Bushell (2024)