modern font stacks

مداخن الخط الحديث

System Font Stack CSS تنظمه تصنيف المحرف لكل نظام تشغيل حديث

أسرع الخطوط المتاحة. لا تنزيل ، لا تحولات تخطيط ، لا ومضات - مجرد تقديمات فورية.

---

نظام واجهة المستخدم · الانتقال · النمط القديم · الإنسانية · إنسانية هندسية

الإنسانية الكلاسيكية · neo-grotesque · monospace slab serif · monospace code

الصناعي · sans · slab serif · العتيقة · didone · مكتوبة بخط اليد

---

ميزات إضافية / دعم نظام التشغيل / الإضافات والإضافات

نظام واجهة المستخدم

خطوط واجهة المستخدم هي تلك الأصلية لواجهة نظام التشغيل. فهي مقروءة للغاية وسهلة القراءة بأحجام صغيرة ، وتحتوي على العديد من أوزان الخطوط ، وهي مثالية لعناصر واجهة المستخدم.

مكدس الخط CSS

 font-family : system-ui , sans-serif;

عرض في متصفحك (عرض المقالة / الأحرف)

؟ عرض المعاينة عبر أنظمة التشغيل

✅ أوزان الخط والملاحظات

أوزان الخط	100	200	300	400	500	600	700	800	900
سان فرانسيسكو	●	●	●	●	●	●	●	●	●
Segoe UI	●	●	●	●	●	●	●	●	●
روبوتو	●	●	●	●	●	●	●	●	●
أوبونتو	●		●	●	●		●
كانتاريل	●		●	●			●	●
noto sans	●	●	●	●	●	●	●	●	●

ملحوظات

• نظام واجهة المستخدم أقل من مكدس الخط وأكثر من قيمة CSS ، system-ui ، ويمثل خط واجهة المستخدم الافتراضية. يتم دعمه على نطاق واسع على جميع أنظمة التشغيل الحديثة.
• الخطوط المعروضة هي الخطوط الافتراضية لواجهة المستخدم في كل نظام تشغيل حديث.

العودة إلى الأعلى ↑

انتقالية

المحارف الانتقالية هي مزيج بين النمط القديم والمحارف الحديثة التي تم تطويرها أثناء التنوير. أحد الأمثلة الأكثر شهرة في المحرف الانتقالي هو Times New Roman ، والذي تم تطويره لصحيفة Times of London.

مكدس الخط CSS

 font-family : Charter , 'Bitstream Charter' , 'Sitka Text' , Cambria , serif;

عرض في متصفحك (عرض المقالة / الأحرف)

؟ عرض المعاينة عبر أنظمة التشغيل

✅ أوزان الخط والملاحظات

أوزان الخط	100	200	300	400	500	600	700	800	900
ميثاق				●			●		●
ميثاق Bitstream				●			●
نص سيتكا				●			●
كامبريا				●			●
noto serif¹				●			●

ملحوظات

• Harter هو محرف رائع وخالد صممه Matthew Carter في عام 1987 لآلات الفاكس منخفضة الدقة 300DPI وطابعات الليزر. إنه يحتوي على ارتفاع كبير في إمكانية القراءة ، ويتمسك بشكل جميل على شاشات اليوم.
• يحتوي ميثاق MacOS على مساحة غريبة غير مكشوفة (   ). تم الإبلاغ عن هذا الخطأ إلى Apple.
• Sitka هو محرف جميل آخر صممه Matthew Carter يشبه قليلاً ميثاق. تم تصميم Sitka في تعاون تقنيات القراءة المتقدمة من Microsoft لتحسين قابلية القراءة.
• يستخدم Android Noto Serif كخط serif الافتراضي ، لذلك لا حاجة إلى تحديد في المكدس.

العودة إلى الأعلى ↑

النمط القديم

تتميز محارف النمط القديم بالإجهاد المائل ، وتناقض منخفض بين السكتات الدماغية السميكة والرقيقة ، والرقيق المدورة ، وتم تطويره في فترة النهضة. أحد الأمثلة الأكثر شهرة في محرف النمط القديم هو Garamond.

مكدس الخط CSS

 font-family : 'Iowan Old Style' , 'Palatino Linotype' , 'URW Palladio L' , P052 , serif;

عرض في متصفحك (عرض المقالة / الأحرف)

؟ عرض المعاينة عبر أنظمة التشغيل

✅ أوزان الخط والملاحظات

أوزان الخط	100	200	300	400	500	600	700	800	900
أسلوب أيوان القديم				●			●		●
palatino linotype				●			●
URW بالاديو ل				●			●
P052				●			●
noto serif¹				●			●

ملحوظات

• يستخدم Android Noto Serif كخط serif الافتراضي ، لذلك لا حاجة إلى تحديد في المكدس.

العودة إلى الأعلى ↑

الإنسانية

تتميز المحارف الإنسانية بأشكالها العضوية والخطية وتناقض منخفض بين السكتات الدماغية السميكة والرقيقة. هذه المحارف مستوحاة من الكتابة اليدوية لفترة عصر النهضة وغالبًا ما تعتبر أكثر وضوحًا وأسهل في القراءة من محارف Sans-Serif الأخرى.

مكدس الخط CSS

 font-family : Seravek , 'Gill Sans Nova' , Ubuntu , Calibri , 'DejaVu Sans' , source-sans-pro , sans-serif;

عرض في متصفحك (عرض المقالة / الأحرف)

؟ عرض المعاينة عبر أنظمة التشغيل

✅ أوزان الخط والملاحظات

أوزان الخط	100	200	300	400	500	600	700	800	900
سيرافيك		●	●	●	●		●
جيل بلا نوفا			●	●			●	●
أوبونتو	●		●	●	●		●
Calibri			●	●			●
Dejavu Sans	●			●			●
مصدر بلا برو				●		●	●

ملحوظات

• Gill Sans Nova متاح كخط إضافي قابل للتنزيل.
• يستخدم Source Sans Pro الاسم Sans-Pro تحت Android ، لذلك يستهدف هذا الخط فقط أجهزة Android.

العودة إلى الأعلى ↑

الهندسي الهندسي

تتميز المحارف البشرية الهندسية بأشكالها النظيفة والهندسية وعرضها الموحد. غالبًا ما تعتبر هذه المحارف حديثة وأنيقة في المظهر ، وغالبًا ما تستخدم للعناوين الرئيسية وأغراض العرض الأخرى. Futura هو مثال مشهور على هذا التصنيف.

مكدس الخط CSS

 font-family : Avenir , Montserrat , Corbel , 'URW Gothic' , source-sans-pro , sans-serif;

عرض في متصفحك (عرض المقالة / الأحرف)

؟ عرض المعاينة عبر أنظمة التشغيل

✅ أوزان الخط والملاحظات

أوزان الخط	100	200	300	400	500	600	700	800	900
أفينير			●	●	●			●	●
مونتسيرات	●	●	●	●	●	●	●	●	●
كوربل			●	●			●
URW القوطي			●			●
مصدر بلا برو				●		●	●

ملحوظات

• تم اختيار Avenir على Avenir التالي لـ MacOS لأن الوزن 300 أكثر وضوحًا على شبكة الإنترنت على مساحة 200 التي يتمتع بها Avenir التالي. إذا كنت تبحث عن إضاءة خفيفة أو أسود فائق ، فلا تتردد في تبديل Avenir لـ Avenir التالي.
• يستخدم Source Sans Pro الاسم Sans-Pro تحت Android ، لذلك يستهدف هذا الخط فقط أجهزة Android.

العودة إلى الأعلى ↑

الإنسانية الكلاسيكية

تتميز المحارف الإنسانية الكلاسيكية بكيفية اتساع السكتات الدماغية بمهارة لأنها تصل إلى أطراف السكتة الدماغية دون أن تنتهي في رقيق. هذه المحارف مستوحاة من العواصم الرومانية الكلاسيكية ونحت الحجر على شواهد قبر النهضة.

مكدس الخط CSS

 font-family : Optima , Candara , 'Noto Sans' , source-sans-pro , sans-serif;

عرض في متصفحك (عرض المقالة / الأحرف)

؟ عرض المعاينة عبر أنظمة التشغيل

✅ أوزان الخط والملاحظات

أوزان الخط	100	200	300	400	500	600	700	800	900
أوبتيما				●			●		●
كاندارا			●	●			●
noto sans	●	●	●	●	●	●	●	●	●
مصدر بلا برو				●		●	●

ملحوظات

• يستخدم Source Sans Pro الاسم Sans-Pro تحت Android ، لذلك يستهدف هذا الخط فقط أجهزة Android.

العودة إلى الأعلى ↑

الجدد الجدد

تعد المحارف المتجانسة الجديدة نمطًا من Sans-serif تم تطويره في أواخر القرن التاسع عشر وأوائل القرن العشرين ، ويتميز بأشكاله النظيفة والهندسية وعرضها السكتة الدماغية الموحدة. أحد الأمثلة الأكثر شهرة لمحرف neo-grotesque هو Helvetica.

مكدس الخط CSS

 font-family : Inter , Roboto , 'Helvetica Neue' , 'Arial Nova' , 'Nimbus Sans' , Arial , sans-serif;

عرض في متصفحك (عرض المقالة / الأحرف)

؟ عرض المعاينة عبر أنظمة التشغيل

✅ أوزان الخط والملاحظات

أوزان الخط	100	200	300	400	500	600	700	800	900
إنتر	●	●	●	●	●	●	●	●	●
روبوتو	●	●	●	●	●	●	●	●	●
Helvetica neue	●	●	●	●	●	●	●
آريال نوفا			●	●			●
نيمبوس بلا				●		●	●
آريال				●		●	●

ملحوظات

• Arial Nova متاح كخط إضافي قابل للتنزيل.
• يتم استخدام Roboto في Linux (MX Linux ، elementaryos ، إلخ) والتثبيتات اليدوية. لن يجعل Roboto على Android ، ولكن Will Sans-Serif العام لنظام Android.

العودة إلى الأعلى ↑

Monospace Slab Serif

تتميز محارف Serif Monospace Serif بأحرف عرضية ثابتة ، والتي لها نفس العرض بغض النظر عن شكلها ، وأشكالها الهندسية البسيطة. تستخدم لمحاكاة إخراج الآلة الكاتبة للتقارير والعمل الجدولي والوثائق التقنية.

مكدس الخط CSS

 font-family : 'Nimbus Mono PS' , 'Courier New' , monospace;

عرض في متصفحك (عرض المقالة / الأحرف)

؟ عرض المعاينة عبر أنظمة التشغيل

✅ أوزان الخط والملاحظات

أوزان الخط	100	200	300	400	500	600	700	800	900
Nimbus Mono Ps				●			●
ساعي جديد				●			●
أحادي القطع				●

ملحوظات

• تم تحديد Nimbus Mono PS أولاً لأن العديد من توزيعات Linux تنشئ الاسم المستعار لـ Courier New ولا تمثل دائمًا Serif Serif
• لا يلزم تمثيل Mono Cutive في المكدس لأن Android يخلق اسمًا اسمًا اسمًا لـ Courier New.
• أحادي القطع للأسف لديه وزن واحد فقط

العودة إلى الأعلى ↑

رمز Monospace

تم تصميم محافظ رمز Monospace خصيصًا للاستخدام في البرمجة والتطبيقات الفنية الأخرى. تتميز هذه المحارف بتصميمها الأحادي ، مما يعني أن جميع الحروف والشخصيات لها نفس العرض ، وأشكالها الواضحة المقروءة.

مكدس الخط CSS

 font-family : ui-monospace , 'Cascadia Code' , 'Source Code Pro' , Menlo , Consolas , 'DejaVu Sans Mono' , monospace;

عرض في متصفحك (عرض المقالة / الأحرف)

؟ عرض المعاينة عبر أنظمة التشغيل

✅ أوزان الخط والملاحظات

أوزان الخط	100	200	300	400	500	600	700	800	900
SF Mono			●	●	●	●	●	●
رمز كاسكاديا	●	●	●	●		●	●
كود المصدر Pro		●	●	●	●	●	●	●
مينلو				●			●
Consolas				●			●
Dejavu Sans Mono				●			●
Droid Sans Mono				●

ملحوظات

• SF Mono متاح فقط عبر ui-monospace على MacOS 10.15+ و iOS 13.3+ أثناء استخدام Safari
• لا يلزم تحديد Droid Sans Mono لنظام Android في المكدس لأن monospace هو اسم مستعار لذلك

العودة إلى الأعلى ↑

صناعي

نشأت المحارف الصناعية في أواخر القرن التاسع عشر وتأثرت بشدة بالتقدم في التكنولوجيا والصناعة خلال تلك الفترة. تتميز المحارف الصناعية بأشكال رسائل غامقة ، بلا سيرة ، ومظهر بسيط ومباشر ، واستخدام الخطوط المستقيمة والأشكال الهندسية.

مكدس الخط CSS

 font-family : Bahnschrift , 'DIN Alternate' , 'Franklin Gothic Medium' , 'Nimbus Sans Narrow' , sans-serif-condensed , sans-serif;

عرض في متصفحك (عرض المقالة / الأحرف)

؟ عرض المعاينة عبر أنظمة التشغيل

✅ أوزان الخط والملاحظات

أوزان الخط	100	200	300	400	500	600	700	800	900
Bahnschrift	●	●	●	●	●	●	●	●	●
دين بديل							●
فرانكلين القوطية المتوسطة					●
نيمبوس بلا ضيقة				●			●
روبوتو مكثف	●	●	●	●	●	●	●	●	●

ملحوظات

• نظرًا لأن هذا المكدس محدود على الأوزان عبر أنظمة التشغيل ، فمن الأفضل استخدامه كخط عرض متوسط/غامق
• Bahnschrift هو واحد من أول خط متغير تمت إضافته إلى Windows.
• يستخدم Roboto المكثف اسم SANS-SERIF تحت Android ، لذلك يستهدف هذا الخط فقط أجهزة Android.

العودة إلى الأعلى ↑

مستدير

تتميز المحارف المستديرة بأشكال الحروف المنحنية المستديرة وتعطي مظهرًا أكثر ليونة وأكثر ودية. تمنح الحواف المستديرة المحرف شعورًا أكثر عضوية ومرحة ، مما يجعله مناسبًا للاستخدام في التصاميم غير الرسمية أو الصديقة للطفل. كان نمط Sans-Serif المستدير شائعًا منذ الخمسينيات من القرن الماضي ، ولا يزال يستخدم على نطاق واسع في الإعلانات والعلامات التجارية وأشكال أخرى من التصميم الجرافيكي.

مكدس الخط CSS

 font-family : ui-rounded , 'Hiragino Maru Gothic ProN' , Quicksand , Comfortaa , Manjari , 'Arial Rounded MT' , 'Arial Rounded MT Bold' , Calibri , source-sans-pro , sans-serif;

عرض في متصفحك (عرض المقالة / الأحرف)

؟ عرض المعاينة عبر أنظمة التشغيل

✅ أوزان الخط والملاحظات

أوزان الخط	100	200	300	400	500	600	700	800	900
SF Pro تقريبا	●	●	●	●	●	●	●	●	●
هيراجينو مارو القوطي				●
الرمال السريعة			●	●			●
Comfortaa			●	●			●
مانجاري	●			●			●
أريل جنت جبل							●
جبل جبل جبل جبل							●
Calibri			●	●			●
مصدر بلا برو				●		●	●

ملحوظات

• SF Pro Rounded متوفر فقط عبر ui-rounded على MacOS 10.15+ و iOS 13.3+ أثناء استخدام Safari
• Hiragino Maru Gothic هو من الناحية الفنية محرف ياباني ولكن لديه دعم لجميع الأحرف اللاتينية. لا يتضمن خط MAC جريئًا بحيث سيتم عرض غامق غامق على الشاشة.
• هناك حاجة إلى MT ARIAL Rounded MT للنوافذ ، في حين أن هناك حاجة إلى MT BOLD ROUNDED MT BOLD لنظام التشغيل iOS و MAC وتثبيتات Windows الأقدم
• يستخدم Source Sans Pro الاسم Sans-Pro تحت Android ، لذلك يستهدف هذا الخط فقط أجهزة Android. إنه ليس محرفًا مستديرًا ، لكنه أفضل من Roboto هنا.

العودة إلى الأعلى ↑

رقصة البلاطة

تتميز محارف Serif Slab بوجود Serifs سميكة تشبه الكتلة على نهايات كل حرف. عادةً ما تكون هذه المخالفات غير محدودة ، مما يعني أنه ليس لديهم أي انتقالات منحنية أو مدببة إلى السكتة الدماغية الرئيسية للحرف.

مكدس الخط CSS

 font-family : Rockwell , 'Rockwell Nova' , 'Roboto Slab' , 'DejaVu Serif' , 'Sitka Small' , serif;

عرض في متصفحك (عرض المقالة / الأحرف)

؟ عرض المعاينة عبر أنظمة التشغيل

✅ أوزان الخط والملاحظات

أوزان الخط	100	200	300	400	500	600	700	800	900
روكويل				●			●
روكويل نوفا			●	●			●	●
روبوتو لوح	●		●	●			●
Dejavu Serif				●			●
سيتكا صغيرة				●			●
NOTO SERIF				●			●

ملحوظات

• يتم تضمين Rockwell مع Windows Office
• Rockwell Nova متاح كخط إضافي قابل للتنزيل.
• يستخدم Android Noto Serif كخط serif الافتراضي ، لذلك لا حاجة إلى تحديد في المكدس.

العودة إلى الأعلى ↑

العتيقة

تعد المحارف العتيقة ، المعروفة أيضًا باسم المصريين ، مجموعة فرعية من محارف Serif التي كانت شائعة في القرن التاسع عشر. تتميز برباعياتها التي تشبه الكتلة ووزن السكتة الدماغية الموحدة السميكة.

مكدس الخط CSS

 font-family : Superclarendon , 'Bookman Old Style' , 'URW Bookman' , 'URW Bookman L' , 'Georgia Pro' , Georgia , serif;

عرض في متصفحك (عرض المقالة / الأحرف)

؟ عرض المعاينة عبر أنظمة التشغيل

✅ أوزان الخط والملاحظات

أوزان الخط	100	200	300	400	500	600	700	800	900
Superclarendon			●	●			●		●
نمط بوكمان القديم				●			●
URW Bookman			●			●
جورجيا برو			●	●		●	●		●
جورجيا				●			●
noto serif¹				●			●

ملحوظات

• يتوفر Georgia Pro كخط إضافي قابل للتنزيل.
• يستخدم Android NOTO Serif كمستعير Georgia ، لذلك لا داعي لتحديدها في المكدس.

العودة إلى الأعلى ↑

ديدون

تتميز محارف Didone ، المعروفة أيضًا باسم المحارف الحديثة ، بالتباين العالي بين السكتات الدماغية السميكة والرقيقة ، والإجهاد الرأسي ، و Serifs Lairline بدون قوسين. ظهر أسلوب Didone في أواخر القرن الثامن عشر واكتسب شعبية خلال القرن التاسع عشر.

مكدس الخط CSS

 font-family : Didot , 'Bodoni MT' , 'Noto Serif Display' , 'URW Palladio L' , P052 , Sylfaen , serif;

عرض في متصفحك (عرض المقالة / الأحرف)

؟ عرض المعاينة عبر أنظمة التشغيل

✅ أوزان الخط والملاحظات

أوزان الخط	100	200	300	400	500	600	700	800	900
Didot				●			●
Bodoni Mt				●			●		●
شاشة Noto Serif	●	●	●	●	●	●	●	●	●
URW بالاديو ل				●			●
P052				●			●
سيلفين				●
noto serif¹				●			●

ملحوظات

• يستخدم Android Noto Serif كخط serif الافتراضي ، لذلك لا حاجة إلى تحديد في المكدس.
• لا يتضمن Sylfaen جريئًا ، لذا سيتم عرض غامق غامق على الشاشة.

العودة إلى الأعلى ↑

مكتوبة بخط اليد

تم تصميم المحارف المكتوبة بخط اليد لتقليد مظهر ومظهر اليد. على الرغم من المجموعة الواسعة من أساليب الكتابة اليدوية ، تميل مكدس الخط إلى تبني نمط أكثر رسمية وكل يوم من الكتابة اليدوية.

مكدس الخط CSS

 font-family : 'Segoe Print' , 'Bradley Hand' , Chilanka , TSCu_Comic , casual , cursive;

عرض في متصفحك (عرض المقالة / الأحرف)

؟ عرض المعاينة عبر أنظمة التشغيل

✅ أوزان الخط والملاحظات

أوزان الخط	100	200	300	400	500	600	700	800	900
طباعة Segoe				●			●
برادلي اليد							●
شيلانكا				●
TSCU_COMIC				●
قريباً				●

ملحوظات

• يستخدم قريبًا الاسم غير الرسمي تحت Android ، لذلك يستهدف هذا الخط فقط أجهزة Android.

العودة إلى الأعلى ↑

ميزات إضافية

دعم الرموز التعبيرية

تبحث لإضافة الرموز التعبيرية الأصلية إلى صفحتك؟ إلحاق هذه الخطوط في نهاية مكدس الخط الخاص بك:

 'Apple Color Emoji' , 'Segoe UI Emoji' , 'Segoe UI Symbol' , 'Noto Color Emoji' 

مكافحة الجياز

قم بتقديم النص الخاص بك باستخدام مكافحة الإنقاذ باستخدام خصائص CSS هذه:

 html {
  -webkit-font-smoothing : antialiased;
  -moz-osx-font-smoothing : grayscale;
}

دعم نظام التشغيل

• Windows 7 أو الأحدث
• Android 10 أو أحدث (محدودة للغاية مع 8 خطوط)
• iOS 9.3 أو أحدث
• MacOS 10.9 (مافريكس) أو الأحدث
• Linux (تم أخذ عينات من 12 توزيعة شعبية)

العودة إلى الأعلى ↑

الإضافات والإضافات

• مداخن الخط الحديثة ل CSS Tailwind by Borisanthony
• مداخن الخط الحديث لـ WordPress بواسطة Littlebigthing
• يتم دعم مداخن الخطوط الحديثة أصلاً بواسطة WebStudio

العودة إلى الأعلى ↑