خط النص CSS

من المهم اختيار الخط الصحيح لموقعك!

اختيار الخط مهم

اختيار الخط الصحيح يؤثر بشكل كبير على تجربة المستخدم للموقع.

الخط الصحيح يمكن أن يخلق صورة قوية لبراندك.

من المهم استخدام خطوط سهلة القراءة. تضيف الخطوط قيمة لنصك. من المهم أيضًا اختيار لون الخط وال حجم النص بشكل صحيح.

عائلات الخطوط العادية

في CSS، هناك خمس عائلات خطوط عادية:

  • خط المرسوم (Serif) - هناك خطوط صغيرة عند حواف كل حرف. إنها تعمل على إعطاء شعور بالشكل والرقي.
  • خط غير المرسوم (Sans-serif) - خطوط النص بسيطة (بدون خطوط صغيرة). إنها تعمل على إعطاء مظهر حديث وسهل.
  • خط المسافات المتساوية (Monospace) - هنا كل الحروف لها عرض ثابت. إنها تخلق مظهرًا ميكانيكيًا.
  • خط الكتابة اليدوية (Cursive) - يحاكي خط اليد البشرية.
  • خط الخيال (Fantasy) - هو خط زخرفي/مضحك.

جميع أسماء الخطوط المختلفة تنتمي إلى واحد من خمس عائلات الخطوط العادية.

الفرق بين الخطوط Serif و Sans-serif

سيريف مقابل سان سيريف

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

مثال على بعض الخطوط

عائلات الخطوط العادية مثال على اسم الخط
Serif Times New Roman
Georgia
Garamond
Sans-serif Arial
Verdana
Helvetica
Monospace Courier New
Lucida Console
Monaco
Cursive Brush Script MT
Lucida Handwriting
Fantasy Copperplate
Papyrus

خصوصية font-family في CSS

في CSS، نستخدم خاصية font-family لتعريف الخطوط للنص.

يجب أن يحتوي خاصية font-family على عدة أسماء للخطوط كـ "مكتبة احتياطية" لضمان التوافق الكامل بين المتصفح/نظام التشغيل. يرجى البدء بالخط الذي تحتاجه وأختم بفئة الخط العادية (إذا لم يكن هناك خط آخر متاح، يختار المتصفح الخط العادي من فئة الخطوط العادية). يجب فصل أسماء الخطوط بفواصل بيانات.

ملاحظة:إذا كان اسم الخط يتكون من أكثر من كلمة، يجب وضعها بين أقواس، مثل: "Times New Roman".

مثال

تحديد خطوط مختلفة للعناصر الثلاثة:

.p1 {
  font-family: "Times New Roman", Times, serif;
}
.p2 {
  font-family: Arial, Helvetica, sans-serif;
}
.p3 {
  font-family: "Lucida Console", "Courier New", monospace;
}

جرب بنفسك