CSS für Systemschriften
Die CSS-Deklaration für System-Schriften lautet:
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;Was jede Schrift abdeckt:
| Wert | System |
|---|---|
-apple-system |
macOS/iOS (San Francisco) |
BlinkMacSystemFont |
macOS in Chrome (San Francisco) |
"Segoe UI" |
Windows (Vista+) |
Roboto |
Android / Linux (GNOME) |
Oxygen |
Linux (KDE) |
Ubuntu |
Linux (Ubuntu) |
Cantarell |
Linux (GNOME, ältere Versionen) |
"Helvetica Neue" |
macOS (Fallback, ältere Versionen) |
sans-serif |
Generischer Fallback |
Moderne Kurzform (seit 2021 in allen modernen Browsern unterstützt):
font-family: system-ui, sans-serif;system-ui greift automatisch auf die native Schriftart des jeweiligen Betriebssystems zurück – kein langes Fallback-Listing nötig.
Empfehlung: Für neue Projekte reicht system-ui, sans-serif vollkommen aus. Die lange Variante ist nützlich, wenn du ältere Browser (z. B. Chrome < 56) unterstützen musst.