Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.
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 CSS Eigenschaft 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. Diese funktioniert nur auf macOS.
auto- Dem Browser die Entscheidung überlassen (Verwendet Subpixel-Anti-Aliasing, wenn verfügbar; dies ist die Standardeinstellung)none- Schriftglättung ausschalten; Text mit gezackten scharfen Kanten anzeigen.antialiased- Glätten der Schrift auf Pixelebene, im Gegensatz zum Subpixel. Der Wechsel von Subpixel-Rendering zu Anti-Aliasing für hellen Text auf dunklem Hintergrund 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 unterschiedlichen Werten: -moz-osx-font-smoothing. Diese funktioniert nur auf macOS.
auto- Dem Browser erlauben, eine Optimierung für Schriftglättung zu wählen, typischerweisegrayscale.grayscale- Text mit Graustufen-Anti-Aliasing rendern, im Gegensatz zum Subpixel. Der Wechsel von Subpixel-Rendering zu Anti-Aliasing für hellen Text auf dunklem Hintergrund 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>
Beispiele
Einfaches 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 heller im Gewicht erscheinen.
Für diejenigen unter Ihnen, die kein macOS-System verwenden, hier ist ein Screenshot (die Live-Version erscheint später):
[画像:Zwei Textbeispiele, eines mit der font-smooth Eigenschaft und ein weiteres ohne]
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
Loading...
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)