تنسيق الخطوط Styling Fonts

نوع الخط font-family

شكل التعليمة

font-family:نوع الخط هنا;

مثال:

دورة برمجة مواقع الانترنت 

النتيجة:

مثال آخر فيه تنوع أكثر في الخطوط وطرق كتابة التنسيق:

بسم الله الرحمن الرحيم


طه سوفت للبرامج 


دورة برمجة مواقع الانترنت 

النتيجة:

ملاحظة:
في الجزء التالي من الكود السابق:

font-familyecoType Naskh,tahoma;

الفاصلة بين نوعي خط تعني أنه في حال عدم توفر الخط DecoType Naskh على جهاز المستخدم فإن الخط البديل هو tahoma
وبشكل عام يتم الاعتماد على الخطوط المثبتة على جهاز المستخدم
فإذا وضعنا اسم خط وكان غير موجوداً على جهاز المستخدم فإنه لن يظهر
علماً أن الدورة الحالية هي css2 أما في الإصدار الجديد من اللغة css3 فإنه بإمكانك وضع ملف خط على موقعك واستخدامه
بدون أن يكون موجوداً على جهاز المستخدم وهذا سنتطرق له في سلسلة دروس css3 بعد إنها دورتنا الحالية css2
علماً أن css3 تحوي ميزات جديدة قمة في الروعة والسهولة ولكن يجب أن يكون متصفح الانترنت الذي يستخدمه الزائر يدعمها (حديث)
على كل حال رح نحكي بالتفصيل لاحقاً..
- أيضاً أحب أن أنوه أن الخطين arial , tahoma من أنسب وأفضل الخطوط استخداماً مع اللغة العربية

شكل الخط font-style

أكثر شكلين شيوعاً هما normal و italic
المائل يشبه زر في برامج الأوفيس.
مثال :

This is a normal style شكل عادي 


This is an italic style شكل مائل 

النتيجة :

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

حجم الخط font-size

يمكن تحديد حجم الخط بوحدة البكسل كما في المثال التالي :

حجم الخط 40 بكسل


حجم الخط 30 بكسل


حجم الخط 14 بكسل


الحجم الافتراضي للخط هو 16 بكسل

النتيجة :

أو بوحدة em علماً أن 1em=16px
المثال السابق بعد تعديل وحدة القياس يصبح :

حجم الخط 2.5


حجم الخط 1.875


حجم الخط 0.875


الحجم الافتراضي للخط هو 1

كما يمكن وضع نسبة مئوية بدلاً من الرقم
علماً أن 100% تعادل 16px أي تعادل 1em
مثال :

الحجم الافتراضي للخط هو 100 بالمئة

ما رح دوخكم بالفرق بين الوحدات السابقة ولكن ينصح باستخدام وحدة القياس em لمنع حدوث تفاوت في الشكل بين المتصفحات
واستخدام النسبة 100% للحالة الافتراضية ( أي على body )
باختصار ضع جزء css التالي في موقعك لضبط الشكل على كافة المتصفحات :

body {font-size:100%;}

h1 {font-size:2.5em;}

h2 {font-size:1.875em;}

p {font-size:0.875em;}

وهكذا ...

سماكة الخط font-weight

لها عدة خصائص يهمنا منها فقط bold التي تستخدم لجعل الخط سميك (غامق )
أشبهها لكم بالزر في برامج الأوفيس
مثال :

طه سوفت - خط غامق


طه سوفت - خط عادي

النتيجة :





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

Learn css With Tahasoft


Learn css With Tahasoft

النتيجة :

تجميع واختصار الخصائص معاً (مهم)

بدلاً من كتابة جزء css الطويل التالي :

    p {

        font-style: italic;

        font-weight: bold;

        font-size: 30px;

        font-family: arial;

    }

وبملاحظة أن جميع الخصائص من نوع font فإنه يمكن كتابته بالشكل المختصر التالي

p {font: italic bold 30px arial;}

مع مراعاة ترتيب الخصائص حسب الأولوية التالية :


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

انتهى
المصدر : منتدى طه سوفت للبرامج
قسم لغات برمجة مواقع الانترنت