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

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 unterschiedlichen 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 - Schaltet die Schriftglättung aus; Text wird mit gezackten scharfen Kanten angezeigt.
  • antialiased - Glättet die Schrift auf Pixel-Ebene statt auf Subpixel-Ebene. Das Wechseln von Subpixel-Rendering zu Anti-Aliasing für hellen Text auf dunklem Hintergrund lässt ihn leichter aussehen.
  • 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. Sie funktioniert nur auf macOS.

  • auto - Ermöglicht es dem Browser, eine Optimierung für die Schriftglättung auszuwählen, typischerweise grayscale.
  • grayscale - Rendert Text mit Graustufen-Anti-Aliasing anstelle von Subpixel. Das Wechseln von Subpixel-Rendering zu Anti-Aliasing für hellen Text auf dunklem Hintergrund lässt ihn leichter aussehen.

Formale Definition

Anfangswertauto
Anwendbar aufalle Elemente
VererbtJa
Berechneter Wertwie angegeben
Animationstypdiskret

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 leicht heller im Gewicht aussehen.

Für diejenigen unter Ihnen, die nicht auf einem macOS-System arbeiten, hier ein Screenshot (die Live-Version erscheint später):

Zwei Textbeispiele, 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

Siehe auch