مرجع سريع لتعريف مصفوفات خطوط النظام الأصلية عبر CSS، لتحقيق أقصى سرعة استجابة دون الحاجة لتنزيل خطوط الويب عبر الشبكة.
مصفوفة خطوط النظام الشاملة (Universal System Font Stack)
body {
font-family: -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, Oxygen,
Ubuntu, Cantarell, "Fira Sans",
"Droid Sans", "Helvetica Neue", sans-serif;
}
تعيين خطوط المنصات وأنظمة التشغيل
| الرمز / اسم الخط | نظام التشغيل ومحرك المتصفح المستهدف |
|---|---|
-apple-system |
متصفح Safari على macOS و iOS (خط San Francisco) |
BlinkMacSystemFont |
متصفح Chrome ومحرك Blink على macOS |
"Segoe UI" |
أنظمة Windows 7 و 8 و 10 و 11 |
Roboto |
أجهزة Android الحديثة و ChromeOS |
Oxygen |
توزيعات Linux مع بيئة سطح مكتب KDE |
Ubuntu |
توزيعات Linux مع بيئة Ubuntu Unity أو GNOME |
Cantarell |
توزيعات Linux مع بيئة GNOME 3 فما فوق |
"Fira Sans" |
نظام Firefox OS وبيئات Mozilla |
"Droid Sans" |
أجهزة Android القديمة |
"Helvetica Neue" |
أنظمة macOS القديمة (Mavericks و Yosemite) |
sans-serif |
خط الاحتياط الشامل بدون زوائد (sans-serif) |
الكلمة المفتاحية المعيارية الحديثة (system-ui)
في مواصفات CSS Fonts Module المستوى 4، تدعم المتصفحات الحديثة الكلمة المفتاحية المعيارية الموحدة:
body {
font-family: system-ui, sans-serif;
}