Guida rapida per dichiarare stack di caratteri nativi del sistema operativo in CSS, garantendo massima velocità senza download di font web.
Stack universale di font di sistema
body {
font-family: -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, Oxygen,
Ubuntu, Cantarell, "Fira Sans",
"Droid Sans", "Helvetica Neue", sans-serif;
}
Mappatura dei font per piattaforma
| Nome del font / Token | Sistema operativo e browser |
|---|---|
-apple-system |
Safari su macOS e iOS (San Francisco) |
BlinkMacSystemFont |
Chrome / Motore Blink su macOS |
"Segoe UI" |
Windows 7, 8, 10, 11 |
Roboto |
Android moderno e ChromeOS |
Oxygen |
Linux con ambiente desktop KDE |
Ubuntu |
Linux con Ubuntu Unity / GNOME |
Cantarell |
Linux con GNOME 3+ |
"Fira Sans" |
Firefox OS / ambienti Mozilla |
"Droid Sans" |
Dispositivi Android precedenti |
"Helvetica Neue" |
macOS 10.9 (Mavericks) e 10.10 (Yosemite) |
sans-serif |
Carattere sans-serif di fallback universale |
Parola chiave generica moderna (system-ui)
In CSS Fonts Module Level 4, i browser moderni supportano la parola chiave standardizzata:
body {
font-family: system-ui, sans-serif;
}