تستخدم خاصية نوع الخط في لغة 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;}
الآن ان الكود يعمل بشكل جيد ويظهر على جميع المتصفحات الحجم الذي نريده أن يظهر
| الخاصية | الشرح |
|---|---|
| font | ضبط جميع قيم font في خاصية واحدة |
| font-family | تحديد عائلة الخطوط للنص |
| font-size | تحديد حجم الخط للنص |
| font-style | تحديد تصميم الخط للنص |
| font-variant | تحديد فيما اذا النص سيتم عرضه بخطوط أحرف صغيرة أم لا |
| font-weight | تحديد الغماقة للنص |
ليست هناك تعليقات:
إرسال تعليق