إتصل بنا

الاسم

بريد إلكتروني *

رسالة *

لغة html/css - تنسيق النصوص

8 تعليقات

وصلنا الان إلى الفصل الذي سيعجبك ! فلا شك أنك تحاول إنشاء صفحة HTML تدهش بها أصدقائك .
سنتعلم في هذا الفصل تقنيات جديدة باستخدام لغة الـCSS ، حيث ستمكننا هذه التقنيات من تنسيق نصوصنا و جعلها قابلة للقرائة و جميلة .
الفهرس
  1. حجم الخط .
  2. نوع الخط .
  3. مائل ، سميك ، مسطور ...
حجم الخط

لتعديل حجم الخط في النصوص ، نستعمل خاصية الـCSS الخاصة بهذا font-size . لكن كيف نقوم بتحديد حجم الخط ؟ هنا نستخدم خبراتنا في الوحدات العالمية بحيث يمكننا إستخدام :
  • الحجوم المطلقة ( absolue ) : هذه الحجوم تبقى ثابثة مهما تغيرت أبعاد الشاشة التي تعرض صفحة الموقع ، فما إن تحدد أنت الحجم باستخدام الوحدات الثابثة كالبكسل أو السنتمتر ، فإنها تظهر بنفس الأبعاد كيفما كانت شاشة المستخدم .
  • الحجوم النسبية ( relative ) : هذه الحجوم تتغير حسب شاشة المستخدم ، فعلى مستوى خصائص الـCSS لا يتم تحديد الحجم بالقيم العديدية و إنما بقيم أخرى تتغير من شاشة لأخرى . كما لو أنك تقول للمتصفح إعرض النص كبيرا أو متوسطا أو صغيرا ، و هنا تعطي الحرية للمتصفح في إختيار الحجم الذي يرى بأنه يناسب الوصف الذي أدخلته ، و ذلك إستنادا إلى حجم شاشة المستخدم .
الحجوم المطلقة
لإدخال حجم ثابث نستخدم ، نستخدم الخاصية السابقة font-size مع تحديد الحجم بإستخدام الوحدات المعروفة ( البكسل ، السنتمتر ... )

font-size: 16px;

ستأخذ في هذه الحالة الحروف نفس الحجم و هو 16 بكسل ، شاهد الصورة


إليك مثالا عن إستخدام هذه الخاصية :

p {
    font-size: 14px;
}
h1 {
    font-size: 40px;
}


بالطبع إن أردت إستخدام وحدات أخرى كالسنتمتر أو الميليمتر يمكنك تغيير ' px ' بـ ' cm ' أو ' mm ' .
هذه الوحدات غير مضبوطة جيدا بالنسبة لشاشة الحاسوب لذلك يستحسن إستخدام البكسل 

الحجوم المتغيرة

إنها الطريقة التي ينصح بها ، الحجوم المتغيرة تتناسب مع إعدادات شاشة المستخدم أتوماتيكيا .

هناك عدة طرق لإنشاء الحجوم المتغير . من بينها إستخدام القيم التالية في خاصية font-size :

xx-small : صغير جدا جدا . 
x-small : صغير  جدا .
small : صغير .
medium : متوسط .
large : كبير .
x-large : كبير جدا .
xx-large : عملاق .

مثال للإستخدام
p {
    font-size: small;
}
h1 {
    font-size: large;
}

حسنا ، تعاني هذه التقنية من نقص واحد : ليس هناك سوى سبع قيم ، و هذا قليل . لحسن الحظ يوجد طريقتين لتحديد الحجوم المتغيرة ، طريقتي المفضلة هي تحديد الحجم بإستخدام الوحدة ' em ' ، إنها وحدة خاصة بالـ CSS .
  • إذا كتبتَ 1em ، فإن النص سيظهر بالحجم العادي .
  • إذا كتبت قيمة أكبر من 1 كالقيمة 1.4em ، فإن النص سيظهر أكبر قليلا ( في هذه الحالة أكبر بـ 4 % )
  • إذا كتبت قيمة أصغر من 1 كالقيمة 0.7em ، فإن النص سيظهر أصغر ( في هذه الحالة أصغر بـ 3 % )
إنتبه ! يجب أن تكتب نقطة مكان الفاصلة في القيمة التي تُدخلها .
أي أنه يجب أن تكتب 1.5em و ليس 1,5em

مثال للتثبيت الفكرة
p {
    font-size: 0.8em;
}
h1 {
    font-size: 1.3em;
}

هناك وحدات أخرى توفر الحصول على الحجوم المتغيرة كالـ' ex ' ( يعمل مثل em غير أنه لا يستعمل كثيرا لصعوبة التحكم فيه ) ، هناك أيضا الوحدة المئوية ( %120 ، %80 ... )


نوع الخط

نعم ..... نوع الخط ......نحن الان نمس نقطة حساسة ! 

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

الخبر الجميل هو أن الإصدار الأخير CSS 3 يوفر تقنية تمكننا من التغلب على المشكلة السابقة بسهولة ، سأريك الطريقة في اخر الفقرة بعد التعرف على أساسيات تحديد نوع الخط في الـ CSS  .

خاصية الـCSS التي تمكننا من تحديد نوع الخط هي font-family . يجب أن تكتب نوع الخط كما يلي .

element {
font-family: font;
}

كطريقة لتفادي المشكل السابق يمكن كتابة عدة أنواع بالتتابع

element {
font-family: font1 ,font2, font3, font4 ;
}

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

فيما يلي قائمة بأنواع الخطوط المعروفة و التي تتواجد في كل حواسيب اليوم :
  • tahoma : الخط المفضل لدي .
  • 'traditional arabic' : خط عربي متميز .
  • arial : خط معروف جدا .
  • 'comic sans ms' : خط أجنبي جميل أيضا .
  • 'courier new' : يصلح للعربية أيضا .
  • georgia
  • impact
  • 'time new roman'
  • 'trebuchet ms'
  • verdana
لنطبق ما تعلمناه على صفحتنا

h1 { 
font-family: 'traditional arabic' , tahoma , arial ; 

p { 
font-family: tahoma , arial ;
}


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

إذا كان إسم الخط يحتوي على فراغ مثل traditional arabic ، فلا تنس أن تضعها بين العلامتين '' كما في كود المثال السابق 'traditional arabic' .

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

لكن هذه الخطوط غير كافية ، إنها قليلة ! بعض المواقع تستخدم خطوطا لا توجد على حاسوبي و مع ذلك فهي تظهر على المتصفح ! ماذا لو أردت أن أستخدم خطا خاصا في موقعي ؟

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

قبل أن نبدأ ، لنتعرف أولا على الطريقة التي يفهم بها الحاسوب الخطوط ، هذا ليس ضمن دروس الـHTML/CSS و لكنه من الضروري أن يُعرف قبل البدأ .

الخطوط بكل بساطة عبارة عن ملفات صغيرة الحجم ذات الإمتداد ttf.* أو otf.* و إمتدادات إخرى ، و تتواجد هذه الملفات تحت العنوان التالي C:\WINDOWS\Fonts في حاسوبك حيث ستجد العديد من الملفات التي هي عبارة عن خطوط يعرفها الحاسوب و تستطيع إستعمالها في برنامج Word ، و لكي يفرق الحاسوب بين هذه الخطوط يتم التمييز بينها بوضع أسماء لها بكل بساطة مثل : tahoma ، arial و هكذا  .

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

هذا ما يحذث عند المستخدمين الذين يتوفرون على حواسيب قديمة ( أثرية  ) ، لا يوجد بحواسيبهم ملفات خطوط كافية و بالتالي لا تظهر صفحات الـHTML كما ينبغي .

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

هناك بعض الشروط التي يحبذ الإلتزام بها لإستخدام هذه التقنية :
  • يجب على المتصفح أن يحمل ملف الخط أتماتيكيا ، و أن يكون حجم هذا الملف صغيرا ( حوالي 1 ميغا فقط )
  • العديد من الخطوط غير مجانية و هي تعود لصاحبها ، لذلك فإنه ليس من القانوني إستخدام خط دون الإشارة إلى صاحبه ، لحسن الحظ ، هناك مواقع كـ  www.fontsquirrel.com و  www.dafont.com توفر العديد من الخطوط المجانية للتحميل ، و هناك موقع  www.fonts.com الذي يوفر لك إستعمال خطوط رائعة لموقعك لكن ليس للتحميل بل للإستخدام فقط ، و بالطبع لا ننسى خدمة Google Fonts التي تعمل جيدا هي الأخرى .
  • هناك العديد من أنواع ملفات الخطوط ( حسب الإمتدادات ) ، و بعضها لا يعمل على جميع المتصفحات .
إليك قائمة بالإمتدادات التي يجدب أن تعرفها :
  • True Type Font : إمتداده ttf.* و هو يشتغل على IE9 و باقي المتصفحات .
  • Embedded OpenType : إمتداده eot.* يشتغل فقط على إنترنت إكسبلورر لأنه من إنتاج ميكروسوفت .
  • OpenType Font : إمتداده otf.* لا يشتغل على إنترنت إكسبلورر .
  • SVG Font : إمتداده svg.* الوحيد الذي يعمل على iphone و ipad حتى الان .
  • Web Open Font Format : إمتداده woff.* نوع جديد لإستخدامات الويب يشتغل على IE9 و باقي المتصفحات .
في الـCSS ، لتعريف خط جديد يجب كتابة الخاصية الجديدة التالية :

@font-face {
    font-family: 'MyNewFont';
    src: url( 'MyNewFont.ttf' );
}

ملف الخط يجب أن يكون في نفس المجلد مع ملف الـCSS الذي تكتبه لكي يتم تحميله إنطلاقا من عنوان src ، أو يمكنك إستخدام نظام الروابط كما رأينا في فصل سابق ، و يمكن أيضا إستخدام الروابط نحو الإنترنت ( //:http ) إن كان ملف الخط مرفوعا في سيرفر ما .

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

@font-face {
    font-family: 'MyNewFont';
    src: url( 'MyNewFont.ttf' ) format( 'truetype' ),
    src: url( 'MyNewFont.eot' ) format( 'eot' ),
    src: url( 'MyNewFont.woff' ) format( 'woff' ),
    src: url( 'MyNewFont.svg' ) format( 'svg' );
}

إليك مثالا بسيطا عن خط عربي إسمه ae_AlArabiya و هو معروف جدا عند مصممي الفوتوشوب .


@font-face {

    font-family: 'ae_AlArabiya';
    src: url( 'ae_AlArabiya.ttf' ) format( 'truetype' ),
    src: url( 'ae_AlArabiya.eot' ) format( 'eot' ),
    src: url( 'ae_AlArabiya.woff' ) format( 'woff' ),
    src: url( 'ae_AlArabiya.svg' ) format( 'svg' );
}
h1 {
    font-family: ae-AlArabiya, tahoma, arial;
}



العنصر font-face@ ليس عنصرا عاديا حيث تحدد فيه العنصر الذي تطبق عليه الخط ، بل إنه يلعب دور التعريف فقط ، إنه يعرف المتصفح على الخط فقط ، و تحديد العناصر التي سيطبق عليها الخط يبقى عاديا كما رأينا سابقا .

يبدوا أننا أطلنا كثيرا في هذه الفقرة  ، لننتقل إلى الفقرة التالية .

مائل ، سميك ، مسطور ...

نجد في الـCSS بعض الخصائص التي تغنينا عن إستعمال بعض العناصر ، و قد قلت هذه الجملة في فصل من الفصول السابقة .

النص المائل
ألا يذكرك العنوان بعنصر صغير رأيناه سابقا ؟
نعم إنه <em> ، العنصر الذي يجعل محتواه على شكل نص مائل . في الـCSS يمكننا الحصول على نفس النتائج بل و أفضل بكثير حيث يمكننا جعل ملف الـCSS الذي نشتغل فيه كمنصة التحكم في مظهر صفحاتنا .

هناك خاصية جديدة تمكننا من تحديد طبيعة النص و هي font-style ، وهي تأخذ 3 قيم هي :
  • italic : سيصبح النص مائلا .
  • oblique : سيصبح مائلا أيضا مع فرق صغير بين italic .
  • normal : يصبح النص عاديا ، هذا يصلح مثلا للعنصر <em> إن أردت أن تجعل الخط عاديا بالنسبة للنص داخل هذا العنصر .
على العموم يبدوا أمر الخاصية الجديدة واضحا .

مثال :


h1 { 

    font-family: 'traditional arabic' , tahoma , arial ; 
    font-style: italic;

p { 
    font-family: tahoma , arial ;
}

أصبح العنوان مائلا
النص السميك
بسيط أيضا فالخاصية التي تمكن تحديد تحديد سماكة الخط هي font-weight و هي تأخذ قيمتين هما :
  • bold : النص سيصبح سميكا ، مثال : نص سميك .
  • normal : النص سيصبح عاديا ، و هذه القيمة تصلح للعنصر <strong> مثلا و بعض العناصر الأخرى التي تجعل النص سميكا .
h1 {     
font-weight: bold; 
}
إنه بسيط لا داع للمثال التوضيحي أليس كذلك  .

النص المسطور ....
حسنا هذه الخاصية توفر لك الحصول على نص مسطور أو مشطوب أو غيرها من الأشكال حسب القيم التي تأخذها .
هذه الخاصية هي text-decoration ، و هي تقبل 4 قيم هي :
  • underline : سيصبح النص مسطورا ، مثال : نص مسطور .
  • line-through : سيصبح النص مشطوبا ، مثال : نص مشطوب .
  • overline : سيظهر خط فوق النص ، مثال : نص نص نص نص .
  • blink : سيظهر النص مدة ما ثم يختفي ثم يظهر ، مثال : نص نص نص . هذه الخاصية لا تشتغل إنترنت إكسبلورر و غوغر كروم .
  • none : سيصبح النص عاديا .
طريقة إدخال الخاصية معروفة .

هذا كل شيء حتى الان في هذا الفصل ، ترقبوا الفصل القادم
مساحة إعلانية

تعليقات بلوجر

  1. أهلاً بعودتك .. معلومات قيمه , شكراً لك

    ردحذف
  2. أكثر من رائع ... وللأسف أنني اليوم حتى قرأت هذه التدوينة المفيدة...
    الأمر الآخر هو سؤالي إعتماداً على قولك :
    ♥ و يمكن أيضا إستخدام الروابط نحو الإنترنت ( //:http ) إن كان ملف الخط مرفوعا في سيرفر ما ♥

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

    ردحذف
    الردود
    1. أهلا و سهلا بك أخي رواد .
      بالطبع أخي يمكنك رفع ملف الخط في حسابك على Google Code
      إنه سيرفر للرفع مجاني من عند google ، و هذا جميل
      إليك مقالة ستريك الطريقة http://www.alblogger.com/2011/10/css-html-google-code.html
      تحياتي

      حذف
    2. شكراً لردك السريع أخي ..
      والحقيقة أنني نسيت أن أذكر في تعليقي السابق أن غووغل تحجب معظم خدماتها عن السوريين ومنها خدمة Google Code بسبب العقوبات الأمريكية!!
      فهل تعرف موقع بديل؟؟
      وأرجو أن لا أكون قد أثقلت عليك

      حذف
    3. صدقا أخي لا أعرف أي موقع غير google code

      حذف
  3. حسناً بالنسبة لبلوج سبوت ما يظهر عندي font family ؟ -.-

    أنا مبتدئة من خاطر خاطر خاطري :))

    ردحذف
  4. بارك الله فيك يا اخي في الله

    ردحذف

لإدخال الأكواد بالتعليقات عليك تحويلها بـأداة ترميز أحرف HTML الخاصة