Nwahy Articles V3 pro

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

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

القسم css - الزيارات 8193 - التاريخ 20/3/2008
[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 هي خاصية من خواص صفحات الأنماط تستخدم لاستدعاء الخطوط بالاسم ، تركيبها الأساسي كالتالي :

H2 { font-family: helvetica, impact, sans-serif }


إليك الطريقة التي يفسر بها المتصفح هذه القاعدة : انظر إلى أول خط في القائمة (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 ، ضع حوله علامتي اقتباس في شفرتك :

BODY { font-family: 'gill sans', 'lucida sans', serif }


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 }


--------------------------------------------------------------------------------

[color=FA0309]الخاصية font-size : [/color]

باستخدامك للخاصية font-size يصبح لديك تحكم لا يضاهى في حجم النص ، حيث يصبح تحت يديك عدد غير محدود من أحجام الخطوط لتستعملها في تحجيم نصك كما تشاء .

هناك ثلاث طرق أساسية لتحديد حجم نص ما :

1- بالنقاط Points ، أو البكسل Pixels أو وحدات قياس أخرى .

2- بالكلمات المفتاحية .

3- بقيم النسبة المئوية .

- النقاط points أو البكسل pixels أو وحدات القياس الأخرى ..

صفحات الأنماط تتعرف على العديد من وحدات القياس التي يمكنك استخدامها في تحديد حجم عنصر ما :

النقاط :

P { font-size: 16pt }


هذه القاعدة تخبر المتصفح أن يظهر نص الواصفة <P> بحجم 16 نقطة . و يعتبر حجم النقطة مألوف لمصممي الطباعة ، و هي تشير إلى صندوق خيالي يمتد من آخر الجزء السفلي من الحرف الذي ينزل عن السطر مثل P إلى أول الجزء العلوي من الحرف الذي يصعد أعلى من السطر مثل d .

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

النقاط مثل كل وحدات القياس الأخرى تستطيع بها جعل النص صغير أو كبير كما تريد . (هذا المثال كان باستخدام 8 نقاط لكلمة 'صغير' و 80 نقطة لكلمة 'كبير') .

البكسل :

P { font-size: 20px }


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

و إذا كانت الوحدتين السابقتين لم يعطياك ما ترغب ، استخدم إحدى الوحدات التالية :

1- in اختصار inch أي بوصة .

2- cm اختصار centimeter أي سنتيمترات .

mm3- اختصار millimeter أو ملليمترات .

4- pc اختصار pica أو بيكا .

[color=FA0309]- الكلمات المفتاحية Keywords :[/color]

إذا لم ترغب في استخدام وحدات القياس يمكنك أن تعلن حجم النص باستخدام الكلمات المفتاحية كالتالي :

P { font-size: large }


هناك سبعة كلمات مفتاحية ، و هي مماثلة للقيم العددية التي اعتدنا على رؤيتها مع الواصفة <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 لا يدعم هاتين السمتين .

- قيم النسبة المئوية ..

الطريقة الثالثة لتحديد حجم النص هي بتحديد قيمة مئوية للنص مثل :

P { font-size: 15pt }

B { font-size: 300% }


و سوف يقرأها المتصفح هكذا : اجعل كل نص الواصفة <B> أكبر بثلاث مرات من نص الواصفة <P> أي بحجم 45 نقطة . و كما ترى فإن القيم المئوية دائماً مبنية على وجود قيمة موروثة من العنصر الأب . لكن المتصفحات قد تكون في بعض الأحيان مشاكسة بالنسبة للقيم المئوية ، لذا حاول دائماً أن تختبرها .

أليس الاختيار ممتع .. فأخيراً أصبح لدينا حرية التحكم كما نريد في حجم النص ، و ذلك بفضل الخاصية font-size التي تعطينا مدى تحكم غير محدود .
مشاركة الموضوع

كن أول من يقيم الموضوع
12345

أضف تعليقك على الموضوع