font-smooth

Nicht standardisiert: Diese Funktion ist nicht standardisiert und befindet sich nicht auf dem Weg zur Standardisierung. Verwenden Sie sie nicht auf Produktionsseiten, die dem Web ausgesetzt sind: Sie funktioniert nicht für alle Benutzer. Es kann auch große Inkompatibilitäten zwischen Implementierungen geben, und das Verhalten kann sich in Zukunft ändern.

Die font-smooth CSS Eigenschaft steuert die Anwendung von Anti-Aliasing bei der Darstellung von Schriftarten.

Syntax

css
/* 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. Sie funktioniert nur auf macOS.

  • auto - Der Browser entscheidet (Verwendet Subpixel-Anti-Aliasing, wenn verfügbar; dies ist der Standard).
  • none - Schalten Sie das Schriftglättung aus; Text wird mit gezackten, scharfen Kanten angezeigt.
  • antialiased - Glättet die Schrift auf Pixelebene, im Gegensatz zur Subpixel-Ebene. 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 anderen Werten: -moz-osx-font-smoothing. Sie funktioniert nur auf macOS.

  • auto - Ermöglicht dem Browser die Auswahl einer Optimierung für die Schriftglättung, typischerweise grayscale.
  • grayscale - Rendert Text mit Graustufen-Anti-Aliasing, im Gegensatz zur Subpixel-Ebene. Der Wechsel von Subpixel-Rendering zu Anti-Aliasing für hellen Text auf dunklem Hintergrund lässt ihn heller erscheinen.

Formale Definition

Anfangswertauto
Anwendbar aufalle Elemente
VererbtJa
Berechneter Wertwie angegeben
Animationstypdiskret

Formale Syntax

font-smooth =
  auto | never | always | <absolute-size> | <length>

Beispiele

Grundlegendes Anwendungsbeispiel

Das folgende Beispiel zeigt die Pendants für Safari/Chromium und Firefox, die Schriftglättung auf macOS aktivieren. In beiden Fällen sollte die geglättete Schrift etwas leichter im Gewicht erscheinen.

Für diejenigen von Ihnen, die kein macOS-System verwenden, hier ein Screenshot (die Live-Version erscheint später):

Zwei Textexemplare, eines mit der font-smooth-Eigenschaft und ein weiteres ohne

HTML

html
<p>Without font smoothing</p>

<p class="smoothed">With font smoothing</p>

CSS

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
font-smooth
Non-standard

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Non-standard. Check cross-browser support before using.
See implementation notes.
Uses a non-standard name.

Siehe auch