Kurzreferenz zur Deklaration nativer Systemschriftarten in CSS für maximale Rendering-Geschwindigkeit ohne Netzwerklatenz.
Universeller Systemschriftarten-Stack
body {
font-family: -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, Oxygen,
Ubuntu, Cantarell, "Fira Sans",
"Droid Sans", "Helvetica Neue", sans-serif;
}
Plattform-Zuordnung der Schriftarten
| Schriftname / Token | Betriebssystem & Ziel-Browser |
|---|---|
-apple-system |
Safari unter macOS und iOS (San Francisco) |
BlinkMacSystemFont |
Chrome / Blink-Engine unter macOS |
"Segoe UI" |
Windows 7, 8, 10, 11 |
Roboto |
Modernes Android & ChromeOS |
Oxygen |
Linux mit KDE-Desktopumgebung |
Ubuntu |
Linux mit Ubuntu Unity / GNOME |
Cantarell |
Linux mit GNOME 3+ |
"Fira Sans" |
Firefox OS / Mozilla-Umgebungen |
"Droid Sans" |
Ältere Android-Geräte |
"Helvetica Neue" |
macOS 10.9 (Mavericks) und 10.10 (Yosemite) |
sans-serif |
Universelle Sans-Serif-Ausweichschrift |
Modernes generisches Schlüsselwort (system-ui)
Im CSS Fonts Module Level 4 unterstützen moderne Browser das standardisierte generische Schlüsselwort:
body {
font-family: system-ui, sans-serif;
}