القائمة الرئيسية

الصفحات

شرح Font وخصائصه للمبتدئين

في لغة CSS الخطوط لها اهمية شديدة سنتعرف اليوم علي الخطوط وخصائصها وقيمها , تابع الشرح
شرح Font وخصائصه

السلام عليكم ودرس برمجي جديد في لغة CSS عن الخطوط وان كنت تريد ان يكون موقعك متميز فـ الخطوط ستساعدك في ذلك بلاشك , خاصية الخطوط في لغة css خاصية قيمها سهلة وباذن الله في هذا الدرس ستتعرف علي خصائص الخطوط لنبدأ باول خاصية من خصائص الخطو وهي 

Font Style 

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

وهذه صورة توضح الشرح 

كما ترون في الصورة الاكواد امامكم وشكل الخطوط امامكم بالترتيب 

ونكون انتهينا من ال Font-style وسنتجه الي ثاني خاصية وهي 

font-weight 

هي وزن الخط او وفي هذه القيمة يجب ان تعرف ثلاث قيم وهم 
normal اي ان وزن الخط طبيعي 
lighter اي ان وزن الخط أخف 
bold اي ان وزن الخط ثقيل  
وبامكانك استخدامهم في الخطوط الخاصة بك وستري الصورة ايضا 

 كما ترون الصورة تصف الشرح , ولكن يوجد خاصية اخري وهي القيم 
والقيم تبدأ من 100  : 900 , وهذا الصورة تشرح القيم بطريقة رائعة 


ونكون انتهينا من وزن الخطوط نتجه الي 

font-size  

معني هذه الخاصية هي حجم الخطوط وتنقسم للعديد من القيم بها قيم افتراضية وقيم نسبية 
القيم الافتراضية هي كالاتي 
xx-small;
 x-small;
 small;
 medium;
 large;
 x-large;
 xx-large; 

وبدون شرح القيم فهي احجام الخط 
وفي احجام نسبية مثل ال px وال em وستري في الصورة التالية الفرق بينهم 


كما ترون في الصورة الامثلة للخطوط واحجامها وبكل بساطه هذه هي احجام الخطوط 
ونتجه لأخر خاصية وهي 

font-family 
هي خاصية بها قائمة بها  خط واحد أو أكثر من أنواع الخطوط لتطبق علي الخطوط  وفي درس سابق عن تغيير خط المدونة بالكامل قمنا بشرح ال font-family  
وهي من خلالها ستغير الخط وشكله تضع كود الخط مثل خط الكوفي مثلا 
 <link href=' http://fonts.googleapis.com/earlyaccess/droidarabickufi.css' rel='stylesheet' type='text/css'/> 
بعد هذا في ال css سيكون ال font-family بهذا الشكل 
font-family : Droid Arabic Kufi; 
 وبكل بساطه سيعمل الخط معك وننصحك بقراءة  افضل خطوط ويب لموقع في كود واحد .

 ويكون انتهي درس اليوم اتمني ان اكون قد وفقت في الشرح واذا واجهتك اي مشاكل قم بكتابتها في صفحة الاستشارة المجانية   وان اردت المزيد من الشروحات تصفحوا اقسام الموقع وانتظرو كل جديد يوميا 

تعليقات