استثمر للحياة

برمجة و تصميم و تطوير المواقع

الكتابة و الخطوط Font Family

حجم الخط

استثمر للحياة

معرفة عائلة الخطوط مهمة لتنسيق صفحة بالانجليزية ....
غير اننا نستعمل الانجليزية فى بعض الاحيان مع الصفحات العربية

 

 

نوع  ( عائلة ) الخطوط Font  Family

القوائم العامة للخطوط

تتجمع الخطوط ذات الشكل المتماثل  في مجموعة من الخطوط تسمى القائمة العامة مثل Serif و Sans-serif و Monospace

 

اسم القائمة العامة
 
بعض خطوط العائلة
 
صورة للتوضيح
 
الصفات و الوصف
 
Serif Times New Roman
Georgia
investolife الحروف اللاتينية بها زوائد
Sans-serif Verdana
Arial
investolife الحروف اللاتينية ليس بها زوائد
Monospace Courier New
Lucida Console
  حروف تتساوى فى عرضها

 

 الخاصية   font-family

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

مثال 

investolife

و هذا معناه : كل ما يكتب باستخدام العنصر <h1> سيكون بخط "Arial" ،  إذا لم يكن هذا الخط مثبتاً في جهاز المستخدم سيعرض بدلاً منه خط "Verdana" وإذا لم يكن الإثنان موجودان على حاسوب المستخدم سيتم اختيار خط من عائلة الخطوط sans-serif  و السلام .

لا تنسى  انه لابد من وضع اسم الخط بيم علامتى اقتباس "" اذا كان يحتوى على مسافات , مثل "Times New Roman"  

مثال

 

 نسق الخط "font-style"

الخاصية font-style تحدد ما إذا كان الخط normal أو italic أو oblique، في المثال أدناه كل عناوين <h2> ستظهر بشكل مائل.

investolife

 

 

 تباين الخط "font-variant"

تستخدم للاختيار بين القيمتين normal أو small-caps للخط وهي متعلقة فقط باللغات اللاتينية ، القيمة small-caps تعني أن النص سيكتب بحروف كبيرة لكنها من ناحية الحجم صغيرة . اذا كان المتصفح يدعم هذه الخاصية

 

investolife

 

 

 ثقل الخط "font-weight"

تصف كم ستكون سماكة أو "ثقل" الخط ، فإما أن يكون  normal أو bold .  وهناك متصفحات تدعم استخدام الأرقام من 100 إلى 900 لوصف ثقل الخط .

 

 

 حجم (إرتفاع) الخط "font-size"

يكون حجم الخط عادة بالبكسل  px

investolife

 

غير ان هذه الطريقة تجعل الخط حجمه ثابت لا يمكن تكبيره أو تصغيره  , لذا استخدمت طريقة   em  و هى تجعل الخط يمكن تكبيره و تصغيره حسب رغبة المستخدم .

و التى تعتبر ان

1 em = 16 px

أى أن

investolife

 

investolife

كما يمكن التعبير عن حجم بنسبة مئوية و ذلك باعتبار ان الحجم الافتراضى للخط 100%  , و هذا يجعل الخط يتناسق مع عرض الشاشة , و يمكن تكبيره و تصغيره .

 

investolife

 

 

 جمع كل خصائص الخط "font"

نستخدم font التي يمكنها أن تختصر كل خصائص الخطوط في سطر واحد .  تخيل هذه السطور الأربعة تصف خطوط للعنصر <h2>:

 

investolife

 

 

ى يمكن للسطور الأربعة أن تدمج فى سطر واحد :

 

investolife

 

 

مع مراعاة هذا الترتيب

font-style | font-variant | font-weight | font-size | font-family

 

 

و هى تجعل الخط يتناسق مع عرض الشاشة
اعلان تجاري
اعلان 468