كيف تخبر المتصفح بالخط الذي تريد عرضه

[color=940306]كيف تخبر المتصفح بالخط الذي تريد عرضه ؟ أنت فقط تكتب اسم الخط بعد font-family أليس كذلك ؟ [/color] لسوء الحظ ، المسألة أكثر تعقيداً من هذا . فالخطوط لا تدعى دائماً بنفس الاسم عبر المنصات المختلفة . على سبيل المثال الخط Courier في ماكنتوش يدعى في ويندوز Courier New . و إذا كانت منصة ما تطلق على الخط المائل Italic فإن هناك منصة أخرى تطلق عليه Oblique . و كلما بحثت أكثر ستجد تضارب أكثر . و أكثر من ذلك ، فإن الاسم الذي نطلقه على الخط ، قد يكون مختلف عن الاسم الذي يطلقه الحاسب عليه ، مثلاً الخط Brush Script يطلق عليه الحاسب اسم Brush Script MT و يجب أن تتأكد عندما تستدعي خطاً ما أن يكون بنفس الاسم الذي يعرفه به الحاسب و ليس بالاسم الذي تطلقه عليه . السؤال الآن : كيف تعرف الاسم الذي يطلقه الحاسب على خط ما ؟ الجواب يختلف حسب المنصة التي تعمل عليها : 1- مستخدمي ويندوز : استخدموا أسماء الخطوط تماماً كما تظهر في قائمة الخطوط لتطبيق ما ، (مثل مايكروسوفت وورد) . 2- مستخدمي ماكنتوش : لا تثقوا في الأسماء التي تخبركم بها قوائم الخطوط في التطبيقات ، بدلاً من ذلك افتحوا مجلد الخطوط Fonts الموجود داخل مجلد النظام System و اكتبوا الأسماء في شفرة صفحات الأنماط كما تجدونها في مجلد الخطوط تماماً . [color=FA0309]الخاصية font-family :[/color] font-family هي خاصية من خواص صفحات الأنماط تستخدم لاستدعاء الخطوط بالاسم ، تركيبها الأساسي كالتالي : إليك الطريقة التي يفسر بها المتصفح هذه القاعدة : انظر إلى أول خط في القائمة (helvetica) ، إذا كان هناك خط بنفس الاسم على هذا الحاسب استخدمه ، إذا لم يكن هناك خط بنفس الاسم على الحاسب انتقل إلى الخط الثاني في القائمة (impact) فإذا لم يكن موجوداً أيضاً انتقل إلى الخط الثالث (sans-serif) و إذا لم يكن موجوداً أيضاً ارجع إلى القيمة الافتراضية لعنوان من المستوى الثاني (عادة تكون Arial) . و هذه هي النتيجة التي سوف يخرج بها المتصفح من القاعدة السابقة : [color=FA0309]CSS font control is peachy.[/color]
يمكنك وضع أسماء خطوط في القائمة كما تريد ، و هذه الميزة مفيدة في حالة إذا كنت غير متأكد من اسم خط ما على منصة أخرى ، فيمكنك في هذه الحالة وضع جميع الأسماء التي تشك في أنها صحيحة و إذا صادف المتصفح أحدها سيعرض به النص المطلوب . و لكن يجب أن تأخذ في الاعتبار أن المتصفحات تحب أن تكون أسماء الخطوط بالحروف الصغيرة 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 استخدم علامات اقتباس مفردة : 3- إذا كنت تضع عدد من الإعلانات Declarations سوياً في قاعدة صفحة أنماط و كانت font-family بينهم ، اجعلها آخر واحدة فيهم ، فالمتصفح إنترنت إكسبلورر 3 قد يتجاهل قاعدة صفحة الأنماط متعددة الإعلانات بكاملها إذا لم تكن font-family هي الأخيرة في القاعدة : -------------------------------------------------------------------------------- [color=FA0309]الخاصية font-size : [/color] باستخدامك للخاصية font-size يصبح لديك تحكم لا يضاهى في حجم النص ، حيث يصبح تحت يديك عدد غير محدود من أحجام الخطوط لتستعملها في تحجيم نصك كما تشاء . هناك ثلاث طرق أساسية لتحديد حجم نص ما : 1- بالنقاط Points ، أو البكسل Pixels أو وحدات قياس أخرى . 2- بالكلمات المفتاحية . 3- بقيم النسبة المئوية . - النقاط points أو البكسل pixels أو وحدات القياس الأخرى .. صفحات الأنماط تتعرف على العديد من وحدات القياس التي يمكنك استخدامها في تحديد حجم عنصر ما : النقاط : هذه القاعدة تخبر المتصفح أن يظهر نص الواصفة <P> بحجم 16 نقطة . و يعتبر حجم النقطة مألوف لمصممي الطباعة ، و هي تشير إلى صندوق خيالي يمتد من آخر الجزء السفلي من الحرف الذي ينزل عن السطر مثل P إلى أول الجزء العلوي من الحرف الذي يصعد أعلى من السطر مثل d . النقاط هي وسيلة ممتازة لتحديد حجم النص ، و ذلك لأنها تعمل جيداً عبر المتصفحات و المنصات . الشيء الوحيد الذي يجب أن تحترز له هو أن الخطوط تظهر بشكل افتراضي على شاشات الحاسبات الشخصية Pcs أكبر منها على شاشات حاسبات الماكنتوش . و إن كانت هذه المشكلة تمثل عقبة كبيرة لك ، يمكنك استخدام لغة JavaScript لتحديد المنصة التي يعمل عليها الزائر و الوصل إلى ملف صفحة أنماط مختلف تبعاً لنوع المنصة التي يأتي منها الزائر . النقاط مثل كل وحدات القياس الأخرى تستطيع بها جعل النص صغير أو كبير كما تريد . (هذا المثال كان باستخدام 8 نقاط لكلمة "صغير" و 80 نقطة لكلمة "كبير") . البكسل : من وجهة نظر تصميم الويب ، البكسل هي وحدة قياس مألوفة و يمكن التنبأ بها نسبياً . و في الواقع فإن أفضل شيء في استخدام وحدة البكسل في تحديد حجم النص هو أن حجم النص سيكون متماثل على المنصات المختلفة ، بينما في وحدات القياس الأخرى فإن النص سيظهر على شاشات الحاسبات الشخصية أكبر مما سيكون عليه على شاشات الماكنتوش . و لكن في المقابل فإن النص المحدد الحجم بالبكسل لن يتم طباعته مطابقاً لما تراه ، و في بعض الأحيان لن يتم طباعته على الإطلاق ، و في أحيان أخرى سيتم طباعته بحروف فائقة الصغر . كذلك في بعض إصدارات المتصفحات لن يكون المستخدمين قادرين على تعديل حجم الخط باستخدام إعدادات المتصفح . و إذا كانت الوحدتين السابقتين لم يعطياك ما ترغب ، استخدم إحدى الوحدات التالية : 1- in اختصار inch أي بوصة . 2- cm اختصار centimeter أي سنتيمترات . mm3- اختصار millimeter أو ملليمترات . 4- pc اختصار pica أو بيكا . [color=FA0309]- الكلمات المفتاحية Keywords :[/color] إذا لم ترغب في استخدام وحدات القياس يمكنك أن تعلن حجم النص باستخدام الكلمات المفتاحية كالتالي : هناك سبعة كلمات مفتاحية ، و هي مماثلة للقيم العددية التي اعتدنا على رؤيتها مع الواصفة <FONT SIZE> : 1- xx-small 2- x-small 3- small 4- medium 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 لا يدعم هاتين السمتين . - قيم النسبة المئوية .. الطريقة الثالثة لتحديد حجم النص هي بتحديد قيمة مئوية للنص مثل : و سوف يقرأها المتصفح هكذا : اجعل كل نص الواصفة <b> أكبر بثلاث مرات من نص الواصفة <P> أي بحجم 45 نقطة . و كما ترى فإن القيم المئوية دائماً مبنية على وجود قيمة موروثة من العنصر الأب . لكن المتصفحات قد تكون في بعض الأحيان مشاكسة بالنسبة للقيم المئوية ، لذا حاول دائماً أن تختبرها . أليس الاختيار ممتع .. فأخيراً أصبح لدينا حرية التحكم كما نريد في حجم النص ، و ذلك بفضل الخاصية font-size التي تعطينا مدى تحكم غير محدود .