Snabbreferens för att deklarera operativsystemets inbyggda typsnitt i CSS, vilket ger maximal prestanda utan nätverksladdning.
Universell systemtypsnittsstack
body {
font-family: -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, Oxygen,
Ubuntu, Cantarell, "Fira Sans",
"Droid Sans", "Helvetica Neue", sans-serif;
}
Plattformskartläggning av typsnitt
| Typsnittsnamn / Token | Operativsystem & Webbläsare |
|---|---|
-apple-system |
Safari på macOS och iOS (San Francisco) |
BlinkMacSystemFont |
Chrome / Blink-motorn på macOS |
"Segoe UI" |
Windows 7, 8, 10, 11 |
Roboto |
Moderna Android & ChromeOS |
Oxygen |
Linux med skrivbordsmiljön KDE |
Ubuntu |
Linux med Ubuntu Unity / GNOME |
Cantarell |
Linux med GNOME 3+ |
"Fira Sans" |
Firefox OS / Mozilla-miljöer |
"Droid Sans" |
Äldre Android-enheter |
"Helvetica Neue" |
macOS 10.9 (Mavericks) och 10.10 (Yosemite) |
sans-serif |
Universellt reservtypsnitt i sans-serif |
Modernt generiskt nyckelord (system-ui)
I CSS Fonts Module Level 4 stöder moderna webbläsare det standardiserade nyckelordet:
body {
font-family: system-ui, sans-serif;
}