خطوط CSS
من المهم اختيار الخط المناسب لموقعك على الويب!
تحديد الخط مهم
اختيار الخط الصحيح له تأثير كبير على كيفية تجربة القراء لموقع الويب.
يمكن للخط الصحيح إنشاء هوية قوية لعلامتك التجارية.
من المهم استخدام خط يسهل قراءته. الخط يضيف قيمة إلى النص الخاص بك. من المهم أيضًا اختيار اللون الصحيح وحجم النص للخط.
مجموعات الخطوط العامة
يوجد في CSS خمس مجموعات خطوط عامة:
- خطوط Serif لها حد صغير عند حواف كل حرف. إنهم يخلقون إحساسًا بالشكلية والأناقة.
- تحتوي خطوط Sans-serif على خطوط نظيفة (لا توجد خطوط صغيرة مرفقة). إنها تخلق مظهرًا حديثًا وأضيق الحدود.
- خطوط Monospace - هنا جميع الحروف لها نفس العرض الثابت. يخلقون نظرة ميكانيكية.
- الخطوط المخطوطة تحاكي الكتابة اليدوية البشرية.
- الخطوط الخيالية هي خطوط زخرفية / مرحة.
تنتمي جميع أسماء الخطوط المختلفة إلى إحدى مجموعات الخطوط العامة.
الفرق بين خطوط Serif و Sans-serif
ملاحظة: على شاشات الكمبيوتر ، تعتبر خطوط sans-serif أسهل في القراءة من خطوط serif.
بعض أمثلة الخطوط
| Generic Font Family | Examples of Font Names |
|---|---|
| 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 |
خاصية عائلة الخطوط في CSS
في CSS ، نستخدم font-familyالخاصية لتحديد خط النص.
ملاحظة : إذا كان اسم الخط أكثر من كلمة واحدة ، فيجب أن يكون بين علامتي اقتباس ، مثل: "Times New Roman".
نصيحة: يجب أن تحتوي font-familyالخاصية على العديد من أسماء الخطوط كنظام "احتياطي" ، لضمان أقصى قدر من التوافق بين المتصفحات / أنظمة التشغيل. ابدأ بالخط الذي تريده ، وانتهى بالعائلة العامة (للسماح للمتصفح باختيار خط مشابه في العائلة العامة ، إذا لم تكن هناك خطوط أخرى متوفرة). يجب فصل أسماء الخطوط بفاصلة. اقرأ المزيد عن الخطوط الاحتياطية في الفصل التالي .
مثال
حدد بعض الخطوط المختلفة لثلاث فقرات:
.p1 {
font-family: "Times New Roman", Times, serif;
}
.p2 {
font-family: Arial, Helvetica, sans-serif;
}
.p3 {
font-family: "Lucida Console", "Courier New", monospace;
}