دورة css كاملة للمبتدئين
الدرس الثالث
كيف تخبر المتصفح بالخط الذي تريد عرضه ؟ أنت فقط تكتب اسم الخط بعد font-family أليس كذلك ؟
لسوء الحظ ، المسألة أكثر تعقيداً من هذا . فالخطوط لا تدعى دائماً بنفس الاسم عبر المنصات المختلفة . على سبيل المثال الخط Courier في ماكنتوش يدعى في ويندوز Courier New . و إذا كانت منصة ما تطلق على الخط المائل Italic فإن هناك منصة أخرى تطلق عليه Oblique . و كلما بحثت أكثر ستجد تضارب أكثر .
أكثر من ذلك ، فإن الاسم الذي نطلقه على الخط ، قد يكون مختلف عن الاسم الذي يطلقه الحاسب عليه ، مثلاً الخط Brush Script يطلق عليه الحاسب اسم Brush Script MT و يجب أن تتأكد عندما تستدعي خطاً ما أن يكون بنفس الاسم الذي يعرفه به الحاسب و ليس بالاسم الذي تطلقه عليه .
السؤال الآن : كيف تعرف الاسم الذي يطلقه الحاسب على خط ما ؟ الجواب يختلف حسب المنصة التي تعمل عليها :
السؤال الآن : كيف تعرف الاسم الذي يطلقه الحاسب على خط ما ؟ الجواب يختلف حسب المنصة التي تعمل عليها :
1- مستخدمي ويندوز : استخدموا أسماء الخطوط تماماً كما تظهر في قائمة الخطوط لتطبيق ما ، (مثل مايكروسوفت وورد) .
2- مستخدمي ماكنتوش : لا تثقوا في الأسماء التي تخبركم بها قوائم الخطوط في التطبيقات ، بدلاً من ذلك افتحوا مجلد الخطوط Fonts الموجود داخل مجلد النظام System و اكتبوا الأسماء في شفرة صفحات الأنماط كما تجدونها في مجلد الخطوط تماماً .
الخاصية font-family :
font-family هي خاصية من خواص صفحات الأنماط تستخدم لاستدعاء الخطوط بالاسم ، تركيبها الأساسي كالتالي :
إليك الطريقة التي يفسر بها المتصفح هذه القاعدة : انظر إلى أول خط في القائمة (helvetica) ، إذا كان هناك خط بنفس الاسم على هذا الحاسب استخدمه ، إذا لم يكن هناك خط بنفس الاسم على الحاسب انتقل إلى الخط الثاني في القائمة (impact) فإذا لم يكن موجوداً أيضاً انتقل إلى الخط الثالث (sans-serif) و إذا لم يكن موجوداً أيضاً ارجع إلى القيمة الافتراضية لعنوان من المستوى الثاني (عادة تكون Arial) . و هذه هي النتيجة التي سوف يخرج بها المتصفح من القاعدة السابقة :
يمكنك وضع أسماء خطوط في القائمة كما تريد ، و هذه الميزة مفيدة في حالة إذا كنت غير متأكد من اسم خط ما على منصة أخرى ، فيمكنك في هذه الحالة وضع جميع الأسماء التي تشك في أنها صحيحة و إذا صادف المتصفح أحدها سيعرض به النص المطلوب . و لكن يجب أن تأخذ في الاعتبار أن المتصفحات تحب أن تكون أسماء الخطوط بالحروف الصغيرة small .
من الجيد أن تستخدم أسماء خطوط عامة كإسم أخير في قائمتك ، و هذه الأسماء هي :
1- serif : و هو نوع الخط الذي به ذنابة أو شرطة صغيرة في أعلاه أو أسفله (مثل Times New Roman) .
2- sans-serif : و هو الخط الذي ليس به ذنابة (مثل Arial أو Helvetica) .
3- cursive : و هو الخط المشبك الذي يشبه الكتابة اليدوية (مثل Comic Sans) .
2- مستخدمي ماكنتوش : لا تثقوا في الأسماء التي تخبركم بها قوائم الخطوط في التطبيقات ، بدلاً من ذلك افتحوا مجلد الخطوط Fonts الموجود داخل مجلد النظام System و اكتبوا الأسماء في شفرة صفحات الأنماط كما تجدونها في مجلد الخطوط تماماً .
الخاصية font-family :
font-family هي خاصية من خواص صفحات الأنماط تستخدم لاستدعاء الخطوط بالاسم ، تركيبها الأساسي كالتالي :
H2 { font-family: helvetica, impact, sans-serif }
CSS font control is peachy.
يمكنك وضع أسماء خطوط في القائمة كما تريد ، و هذه الميزة مفيدة في حالة إذا كنت غير متأكد من اسم خط ما على منصة أخرى ، فيمكنك في هذه الحالة وضع جميع الأسماء التي تشك في أنها صحيحة و إذا صادف المتصفح أحدها سيعرض به النص المطلوب . و لكن يجب أن تأخذ في الاعتبار أن المتصفحات تحب أن تكون أسماء الخطوط بالحروف الصغيرة small .
من الجيد أن تستخدم أسماء خطوط عامة كإسم أخير في قائمتك ، و هذه الأسماء هي :
1- serif : و هو نوع الخط الذي به ذنابة أو شرطة صغيرة في أعلاه أو أسفله (مثل Times New Roman) .
2- sans-serif : و هو الخط الذي ليس به ذنابة (مثل Arial أو Helvetica) .
3- cursive : و هو الخط المشبك الذي يشبه الكتابة اليدوية (مثل Comic Sans) .
4- fantasy : خط خيالي (مثل Ransom أو Tahoma) .
monospace5- : و هو خط أحادي المسافة أي أن كل حرف فيه له نفس حجم الحروف الأخرى و تكون المسافة بين الحروف و بعضها واحدة لا تتغير (مثل Courier) .
لكن المتصفح نتكسيب كوميونيكيتور لا يدعم أنواع الخطوط Cursive و Fantasy .
و إليك المزيد من النصائح حول أسماء الخطوط :
1- إذا كان اسم الخط يتكون من أكثر من كلمة واحدة مثل Gill Sans ، ضع حوله علامتي اقتباس في شفرتك :
2- بالنسبة للأنماط المضافة في السطر Inline استخدم علامات اقتباس مفردة :
<P STYLE="font-family: 'gill sans', 'lucida sans', serif">Text goes here.</P>
3- إذا كنت تضع عدد من الإعلانات Declarations سوياً في قاعدة صفحة أنماط و كانت font-family بينهم ، اجعلها آخر واحدة فيهم ، فالمتصفح إنترنت إكسبلورر 3 قد يتجاهل قاعدة صفحة الأنماط متعددة الإعلانات بكاملها إذا لم تكن font-family هي الأخيرة في القاعدة :
H2 { color: red; margin: 10px; font-family: times, serif }
الخاصية font-size :
باستخدامك للخاصية font-size يصبح لديك تحكم لا يضاهى في حجم النص ، حيث يصبح تحت يديك عدد غير محدود من أحجام الخطوط لتستعملها في تحجيم نصك كما تشاء .
هناك ثلاث طرق أساسية لتحديد حجم نص ما :
1- بالنقاط Points ، أو البكسل Pixels أو وحدات قياس أخرى .
2- بالكلمات المفتاحية .
3- بقيم النسبة المئوية .
لكن المتصفح نتكسيب كوميونيكيتور لا يدعم أنواع الخطوط Cursive و Fantasy .
و إليك المزيد من النصائح حول أسماء الخطوط :
1- إذا كان اسم الخط يتكون من أكثر من كلمة واحدة مثل Gill Sans ، ضع حوله علامتي اقتباس في شفرتك :
BODY { font-family: "gill sans", "lucida sans", serif }
<P STYLE="font-family: 'gill sans', 'lucida sans', serif">Text goes here.</P>
3- إذا كنت تضع عدد من الإعلانات Declarations سوياً في قاعدة صفحة أنماط و كانت font-family بينهم ، اجعلها آخر واحدة فيهم ، فالمتصفح إنترنت إكسبلورر 3 قد يتجاهل قاعدة صفحة الأنماط متعددة الإعلانات بكاملها إذا لم تكن font-family هي الأخيرة في القاعدة :
H2 { color: red; margin: 10px; font-family: times, serif }
الخاصية font-size :
باستخدامك للخاصية font-size يصبح لديك تحكم لا يضاهى في حجم النص ، حيث يصبح تحت يديك عدد غير محدود من أحجام الخطوط لتستعملها في تحجيم نصك كما تشاء .
هناك ثلاث طرق أساسية لتحديد حجم نص ما :
1- بالنقاط Points ، أو البكسل Pixels أو وحدات قياس أخرى .
2- بالكلمات المفتاحية .
3- بقيم النسبة المئوية .
- النقاط points أو البكسل pixels أو وحدات القياس الأخرى ..
صفحات الأنماط تتعرف على العديد من وحدات القياس التي يمكنك استخدامها في تحديد حجم عنصر ما :
النقاط :
هذه القاعدة تخبر المتصفح أن يظهر نص الواصفة <P> بحجم 16 نقطة . و يعتبر حجم النقطة مألوف لمصممي الطباعة ، و هي تشير إلى صندوق خيالي يمتد من آخر الجزء السفلي من الحرف الذي ينزل عن السطر مثل P إلى أول الجزء العلوي من الحرف الذي يصعد أعلى من السطر مثل d .
النقاط هي وسيلة ممتازة لتحديد حجم النص ، و ذلك لأنها تعمل جيداً عبر المتصفحات و المنصات . الشيء الوحيد الذي يجب أن تحترز له هو أن الخطوط تظهر بشكل افتراضي على شاشات الحاسبات الشخصية Pcs أكبر منها على شاشات حاسبات الماكنتوش . و إن كانت هذه المشكلة تمثل عقبة كبيرة لك ، يمكنك استخدام لغة JavaScript لتحديد المنصة التي يعمل عليها الزائر و الوصل إلى ملف صفحة أنماط مختلف تبعاً لنوع المنصة التي يأتي منها الزائر .
النقاط مثل كل وحدات القياس الأخرى تستطيع بها جعل النص صغير أوكبير كما تريد . (هذا المثال كان باستخدام 8 نقاط لكلمة "صغير" و 80 نقطة لكلمة "كبير") .
البكسل :
صفحات الأنماط تتعرف على العديد من وحدات القياس التي يمكنك استخدامها في تحديد حجم عنصر ما :
النقاط :
P { font-size: 16pt }
النقاط هي وسيلة ممتازة لتحديد حجم النص ، و ذلك لأنها تعمل جيداً عبر المتصفحات و المنصات . الشيء الوحيد الذي يجب أن تحترز له هو أن الخطوط تظهر بشكل افتراضي على شاشات الحاسبات الشخصية Pcs أكبر منها على شاشات حاسبات الماكنتوش . و إن كانت هذه المشكلة تمثل عقبة كبيرة لك ، يمكنك استخدام لغة JavaScript لتحديد المنصة التي يعمل عليها الزائر و الوصل إلى ملف صفحة أنماط مختلف تبعاً لنوع المنصة التي يأتي منها الزائر .
النقاط مثل كل وحدات القياس الأخرى تستطيع بها جعل النص صغير أوكبير كما تريد . (هذا المثال كان باستخدام 8 نقاط لكلمة "صغير" و 80 نقطة لكلمة "كبير") .
البكسل :
P { font-size: 20px }
من وجهة نظر تصميم الويب ، البكسل هي وحدة قياس مألوفة و يمكن التنبأ بها نسبياً . و في الواقع فإن أفضل شيء في استخدام وحدة البكسل في تحديد حجم النص هو أن حجم النص سيكون متماثل على المنصات المختلفة ، بينما في وحدات القياس الأخرى فإن النص سيظهر على شاشات الحاسبات الشخصية أكبر مما سيكون عليه على شاشات الماكنتوش . و لكن في المقابل فإن النص المحدد الحجم بالبكسل لن يتم طباعته مطابقاً لما تراه ، و في بعض الأحيان لن يتم طباعته على الإطلاق ، و في أحيان أخرى سيتم طباعته بحروف فائقة الصغر . كذلك في بعض إصدارات المتصفحات لن يكون المستخدمين قادرين على تعديل حجم الخط باستخدام إعدادات المتصفح .
و إذا كانت الوحدتين السابقتين لم يعطياك ما ترغب ، استخدم إحدى الوحدات التالية :
1- in اختصار inch أي بوصة .
2- cm اختصار centimeter أي سنتيمترات .
و إذا كانت الوحدتين السابقتين لم يعطياك ما ترغب ، استخدم إحدى الوحدات التالية :
1- in اختصار inch أي بوصة .
2- cm اختصار centimeter أي سنتيمترات .
mm3- اختصار millimeter أو ملليمترات .
4- pc اختصار pica أو بيكا .
4- pc اختصار pica أو بيكا .
- الكلمات المفتاحية Keywords :
إذا لم ترغب في استخدام وحدات القياس يمكنك أن تعلن حجم النص باستخدام الكلمات المفتاحية كالتالي :
إذا لم ترغب في استخدام وحدات القياس يمكنك أن تعلن حجم النص باستخدام الكلمات المفتاحية كالتالي :
P { font-size: large }هناك سبعة كلمات مفتاحية ، و هي مماثلة للقيم العددية التي اعتدنا على رؤيتها مع الواصفة <FONT SIZE> :
1- xx-small
2- x-small
3- small
2- x-small
3- small
4- medium
5- large
5- large
6- x-large
7- xx-large
بهذه القيم فإن المتصفح حر في اختيار حجم الخط المناسب لكل كلمة مفتاحية . على سبيل المثال x-large تظهر بحجم 28 نقطة في المتصفح نتسكيب كومينيكيتور (ويندوز و ماك) ، بينما سيظهر في المتصفح إنترنت إكسبلورر 4 بحجم 24 نقطة (ويندوز و ماك) ، أما في المتصفح إنترنت إكسبلورر 3 فستظهر بحجم 18 (ويندوز 95) .
يمكنك أيضاً أن تستخدم كلمات مفتاحية نسبية مثل :
1- smaller
2- larger
القيمة smaller تخبر المتصفح أن يعدل حجم النص الحالي و ينزل به درجة في سلم الكلمات المفتاحية . على سبيل المثال إذا كان هناك نص كبير large تم تطبيق السمة smaller عليه فسوف يكون بحجم medium . و بالمثل تكون
السمة larger . و لكن احذر فالمتصفح IE 3 لا يدعم هاتين السمتين .
- قيم النسبة المئوية ..
الطريقة الثالثة لتحديد حجم النص هي بتحديد قيمة مئوية للنص مثل :
7- xx-large
بهذه القيم فإن المتصفح حر في اختيار حجم الخط المناسب لكل كلمة مفتاحية . على سبيل المثال x-large تظهر بحجم 28 نقطة في المتصفح نتسكيب كومينيكيتور (ويندوز و ماك) ، بينما سيظهر في المتصفح إنترنت إكسبلورر 4 بحجم 24 نقطة (ويندوز و ماك) ، أما في المتصفح إنترنت إكسبلورر 3 فستظهر بحجم 18 (ويندوز 95) .
يمكنك أيضاً أن تستخدم كلمات مفتاحية نسبية مثل :
1- smaller
2- larger
القيمة smaller تخبر المتصفح أن يعدل حجم النص الحالي و ينزل به درجة في سلم الكلمات المفتاحية . على سبيل المثال إذا كان هناك نص كبير large تم تطبيق السمة smaller عليه فسوف يكون بحجم medium . و بالمثل تكون
السمة larger . و لكن احذر فالمتصفح IE 3 لا يدعم هاتين السمتين .
- قيم النسبة المئوية ..
الطريقة الثالثة لتحديد حجم النص هي بتحديد قيمة مئوية للنص مثل :
P { font-size: 15pt }
B { font-size: 300% }
أليس الاختيار ممتع .. فأخيراً أصبح لدينا حرية التحكم كما نريد في حجم النص ، و ذلك بفضل الخاصية font-size التي تعطينا مدى تحكم غير محدود . كما ترى في هذا المثال كل حرف أ في هذا المثال أكبر بـ 5 نقاط من الحرف الذي قبله ، بدءاً من حجم 5 نقاط إلى حجم 100 نقطة . حاول أن تفعل ذلك بالهتمل إذا استطعت .
ليست هناك تعليقات:
إرسال تعليق