Szybki przewodnik po deklarowaniu natywnych czcionek systemowych w CSS, zapewniający natychmiastowe renderowanie bez opóźnień sieciowych.
Uniwersalny stos czcionek systemowych
body {
font-family: -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, Oxygen,
Ubuntu, Cantarell, "Fira Sans",
"Droid Sans", "Helvetica Neue", sans-serif;
}
Mapowanie czcionek według platform
| Nazwa czcionki / Token | System operacyjny i przeglądarka |
|---|---|
-apple-system |
Safari na macOS i iOS (San Francisco) |
BlinkMacSystemFont |
Chrome / Silnik Blink na macOS |
"Segoe UI" |
Windows 7, 8, 10, 11 |
Roboto |
Nowoczesny Android i ChromeOS |
Oxygen |
Linux ze środowiskiem KDE |
Ubuntu |
Linux z Ubuntu Unity / GNOME |
Cantarell |
Linux z GNOME 3+ |
"Fira Sans" |
Firefox OS / środowiska Mozilla |
"Droid Sans" |
Starsze urządzenia z Androidem |
"Helvetica Neue" |
macOS 10.9 (Mavericks) i 10.10 (Yosemite) |
sans-serif |
Uniwersalna czcionka rezerwowa sans-serif |
Nowoczesne ogólne słowo kluczowe (system-ui)
W specyfikacji CSS Fonts Module Level 4 nowoczesne przeglądarki obsługują ustandaryzowane słowo kluczowe:
body {
font-family: system-ui, sans-serif;
}