Header Ads

نوع الخط



تستخدم خاصية نوع الخط في لغة CSS لتحديد عائلة الخط font family و حجم و الشكل لخط النص




عائلة الخطوط / Font Family


ان عائلة الخطوط هي عبارة عن مجموعة من أنواع الخطوط تستخدم مع خاصية font-family

يجب أن تحتوي خاصية font-family على العديد من أنواع الخطوط وذلك بسبب اذا كان المتصفح لايدعم الأول عند ينتقل للآخر واذا لايدعم الاخر ينتقل للثالث وهكذا

في البداية استخدم الخط الذي تريده وبعد ذلك استخدم الخطوط العامة لتتيح للمتصفح استخدام الخطوط العامة اذا لم يكن يدعم الخطوط التي قمت بوضعها مسبقاً

ملاحظة: اذا كان اسم نوع الخط يحتوي على أكثر من كلمة عندها يجب أن يوضع بين اشارات الاقتباس مثال
font-family: "Times New Roman"



اذا قمت بوضع أكثر من نوع خط عندها يمكنك الفصل بينهم من خلال اشارة الفاصلة ","

مثال
p{font-family:"Times New Roman", Times, serif;}




شكل الخط Font Style


تستخدم خاصية شكل الخط بشكل واسع font-style لتحديد ميلان النص أي italic

لهذه الخاصية ثلاث قيم مختلفة :

  • طبيعي normal - يظهر النص بشكل طبيعي عادي

  • مائل italic – يظهر النص بشكل مائل

  • منحني oblique – يظهر النص بشكل منحني ( منحني نفس استخدام المائل ولكن غير مدعوم من قبل المتصفحات لذلك يفضل استخدام المائل )

مثال
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}





حجم الخط Font Size


تضبط خاصية font-size حجم الخط

كونك قادراً على ضبط حجم الخط فهذه مرحلة مهمة في التصميم المثالي لموقعك . ولكن لاتستخدم ضبط حجم الخط font-size لجعل الفقرة تبدو كبيرةً كالعنوان أو العنوان يبدو صغيراً كالفقرة

يمكنك دوماً استخدام وسوم HTML للعناوين من <h1> الى <h6> أو <p> للفقرات
قيمة حجم الخط يمكن أن تكون مطلقة أو متصلة




الحجم المطلق Absolute size



  • ضبط النص لحجم معين

  • لايسمح للمستخدم بتغيير حجم الخط في جميع المتصفحات (خطوة سيئة لأسباب تتعلق بإمكانية الوصول)

  • يعتبر الحجم المطلق ذو نفع وخاصة عندما يكون الحجم الظاهر للنص معروف




الحجم المتصل Relative size



  • ضبط حجم النص المتصل حول العناصر

  • يسمح للمستخدم بتغيير حجم الخط في المتصفحات

ان لم تقم بتحديد حجم الخط فإن الحجم الافتراضي للنص هو طبيعي normal مثل الفقرة ويكون الحجم تماماً 16 بكسل أي (16px=1em)



ضبط حجم الخط من خلال البكسل


ان ضبط حجم الخط من خلال البكسل سيمنحك تحكم كامل على حجم النص

مثال
h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}


في المثال السابق سيسمح لمتصفحات الانترنت مثل Explorer 9, Firefox, Chrome, Opera, and Safari بضبط حجم النص

ملاحظة: المثال السابق لايعمل على اصدارات انترنت اكسبلورر Internet Explorer أقدم من 9

يمكن ضبط حجم النص من خلال جميع المتصفحات باستخدام أداة التقريب zoom
(يمكن ضبط حجم الصفحة بالكامل ليس فقط النص)



ضبط حجم الخط من خلال em


لتجنب مشاكل اصدارات المتصفحات المزعجة القديمة من انترنت اكسبلورر وغيرها , تمكّن المبرمجون من استخدام وحدة القياس em بدلاً من البكسل

تنصح منظمة الويب العالمية W3C باستخدام وحدة القياس em

كل 1em يعادل حجم الخط الطبيعي حيث أن الحجم الافتراضي في المتصفحات هو 16px ولهذا فإن الحجم الافتراضي يعتبر 1em

يمكن حساب حجم الخط من خلال عملية قسمة البكسل على 16 وسيظهر لنا الناتج بوحدة em

Px/16=em

مثال
h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */


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

ولكن لسوء الحظ بعض الاصدارات الأقدم من متصفح انترنت اكسبلورر IE يصبح النص كبيراً جداً عند ضبطه حجم كبير أو صغيراً جداً اذا تم ضبطه صغير



استخدام مزيجاً من النسبة المئوية % أو em


ان الحل الذي يعمل على جميع المتصفحات هو ضبط الحجم الافتراضي font-size من خلال النسبة المئوية لوسم <body>

مثال
body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}


الآن ان الكود يعمل بشكل جيد ويظهر على جميع المتصفحات الحجم الذي نريده أن يظهر




جميع خاصيات CSS المتعلقة font
الخاصيةالشرح
fontضبط جميع قيم font في خاصية واحدة
font-familyتحديد عائلة الخطوط للنص
font-sizeتحديد حجم الخط للنص
font-styleتحديد تصميم الخط للنص
font-variantتحديد فيما اذا النص سيتم عرضه بخطوط أحرف صغيرة أم لا
font-weightتحديد الغماقة للنص




يتم التشغيل بواسطة Blogger.