فاصلة
  • CSS
  • ?
    : ترتيب الدرس
  • 13
    عدد الدروس
  • ?
    أخر تحديث

الخطوط في لغة CSS

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

خط بأسم arial متوفر في اغلب أنظمة التشغيل 

خط بأسم tahoma متوفر في اغلب انظمة التشغيل ايضاً

 الخط المستخدم في الموقع


خاصية Font-Family

شكل الخط يعتبر من اهم العوامل لأنشاء تصميم جيد ,وخاصية font-family من أهم الخصائص في لغة CSS لأنها مسؤولة عن أختيار خط محدد بديلاً عن الخط الأفتراضي ,ولتغيير نوع الخط يجب اولاً معرفة اسم الخط , وفيما يلي أسماء خطوط متوفرة بشكل اساسي في اللغة وكل ما عليك هو معرفة اسم الخط

  • Arial : خط افتراضي متوفر علي اغلب الأجهزة
  • tahoma : خطا فتراضي متوفر علي اغلب الأجهزة

هناك العديد من الخطوط المتوفرة يمكنك البحث عنها عبر محركات البحث ,ويمكنك اختيارالشكل المناسب للخط وأستعمالة في موقعك ,ويمكنك ايضاً الدخول الي مكتبة خطوط جوجل والأختيار من خطوط جوجل المميزة لمصممين الويب ,والأمر التالي هو المسؤول عن تغيير الخط

 
font-family:arial ;


خاصية Font-style

خاصية Font-style مسؤولة عن تغيير ستايل الخط ,بحيث يوجد اشكال اساسية للخط في لغة CSS ,منها الشكل المائل والشكل الطبيعي كما يلي

  • Normal : الشكل الطبيعي للخط ويتم اختيارها في حالة تغيير الخط من نمط اخر الي النمط الطبيعي
  • Italic  : الشكل المائل للخط ويتم اختيارها لتغيير الخط من الوضع الطبيعي الي الوضع المائل 20 درجة يميناً 

,وقد يتسائل البعض لماذا أستخدم خاصية normal  الخط الطبيعي وهو بالفعل الأستايل الأفتراضي للنصوص ,تخيل معي بأنك قمت بأنشاء موقع وقمت بتحديد الخاصية italic في الوسم body في تلك الحالة سوف يتم تنفيذ الخاصية علي كل النصوص في الموقع ,ولكن بأستثناء العناصر التي تعطيها القيمة الأفتراضية Normal

والأمثلة التالية لتوضيح طريقة أستخدام الخط المائل والخط الطبيعي

font-style:italic;
font-style:normal;  


خاصية Font-Size

خاصية Font-Size هي خاصية مسؤولة عن تغيير حجم الخط من الحجم الطبيعي الي حجم اقل أو أكبر علي قدر القيمة التي سنعطيها للخاصية ,ولأستخدام الخاصية نقوم بأضافة الأمر التالي للعنصر الذي نريد تغيير حجم الخط له

font-size:20px;

يفضل عدم استخدام مقاسات كبيرة للخط لتحويل الفقرة الي عنوان ويفضل أستخدام وسوم العناوين من h1 الي h6  للتحكم في العناوين


خاصية Font-Weight

خاصية font-weight مسؤولة عن تحديد وزن الخط ,ولمعرفة ما معني وزن الخط سنفترض وجود خيط رفيع وكلما زاد الخيط سمكاً سوف يزيد وزناً ومن هنا سنعتبر بأن سمك الخط هو وزن الخط ,ووزن الخط يأخذ القيم من 100 الي 900 بحيث ان 100 اقل وزن للخط وهو خط رفيع جداً و900 هي أكبر وزن للخط وهو خط "تخين" جداً  وايضاً يوجد قيم ثابتة للوزن يمكن استخدامها كالتالي

  • normal : هو الوزن الطبيعي للخط وهو نفس القيمة  400
  • bold : هو خط سميك ونفس القيمة 700
  • bolder : هو خط سميك جداً ويأخذ القيم التي هي اكبر من 700

الان انت مخير في استخدام القيم الرقمية من 100 الي 900 للتحكم في وزن الخط او أختيار القيم الأساسية normal  ,bold  ,bolder

والأن يمكنك النظر الي الخطوط التالية وهي علي وزن مختلف

خط علي وزن 100

خط علي وزن 400

خط علي وزن 700

خط علي وزن 900

ويمكنك الأن التحكم في وزن الخط عن طريق الأمر التالي font-weight وهو المسؤول عن تغيير وزن الخط 

font-weight:400;
 
أساسيات التضمين الألوان الخلفيات الحدود الهوامش الهوامش الداخلية العرض والأرتفاع الصناديق حدود خارجية النصوص الخطوط الأيقونات