تحديد الخط في CSS

السلام عليكم ورحمة الله

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

🅰️ الخــط 

صراحةً، أكثر ما يُـؤَرِّقُ مُشْرِفي المواقع  هو الخـط 🔎

من أسوأ المشاكل التي يمكن أن تجعل موقعك خارج الترتيب هي ظهور الخطوط لدى الزوار مخالفة لما تظهر عندك!

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

مــا الحـل إذن🗝 ؟

الجميل في الأمر اليوم ، هو أن ظهور CSS3 قد عالج هذا المشكل بحيث يقوم بتنزيل الخط المطلوب أوتوماتيكياً لدى الزوار.

تغيير خـط المستخدم

📎 إن خاصية CSS  تمكننا من تحديد نوع الخط عبر استخدام font-family. و يجب أن تكتب إسم الخط على هذا الشكل:

 

إذا لم يكن لذا المستخدم الخط الذي حَدَّدْتَهُ، فيمكنك تحديد عدة خطوط مفصولة بالفواصل مثل:

 

 

بهاته الطريقة سيتمكن الزائر لموقعك من عرض موقعك بأحد الخطوط المبرمجة لديك، فعندما لا يجد الخط الأول (Arial) يتنقل للخط الثاني ( Tahoma)  ثم الثالث  ( Adobe Arabic) و هكذا حتى يعثر على الخط الذي يوافق الموجود بحاسوبه.

ولكن، ألا توجد خطوط أكثر استعمالاً في كل المواقع؟ … طبعاً هناك العديد من الخطوط التي تستعملها  جل مواقع الويب و هي حتماً موجودة في جل الحواسب منها:

  • Arial
  • Arial Black 
  • Tahoma
  • Verdana
  • Comic Sans MS
  • Courier New
  • Georgia
  • Impact
  • Times New Roman  
  • Adobe Arabic

ملاحظة:
عندما يكون إسم الخط مكون من كلمتين منفصلتين ( Adobe Arabic ) فإننا نضعهما داخل علامة اقتباس (guillemets) كما هو مبين في المثال فوق “Adobe Arabic” .

 


خـط مائل ، غامِق ، مُسَطَّر …

Italique, gras, souligné…


في كل محررات النصوص يمكنك استعمال هاته الخواص، و هي قديمة قدم الويب، و في CSS3 مازالت تثبت وجودها، لكن بطريقة شيئاً ما مختلفة عمّا كانت عليه عندما كانت مندمجة مع HTML.

وسنتعرف على هاته الخواص و غيرها في هذا الدرس إن شاء الله، فقط  أنصحك بالتركيز:

الخط المائـل

⚠️  هل مازلت تذكر علامة <em>  ؟  إذا نسيت عُد إلى الوراء واقرأ دورها ، و تذكر كذلك أنني لم أُشِر أبداً بأن دورها هو كتابة الخط المائل، بل أشرت إلى أن إحاطتها بالكتابة دليل على أهمية محتوى النص  😯  تذكر هذا جيداً !

هناك بعض المعلومات تتفلت لكثرة توافد الجديد إلى ذاكرتنا، لكن التِّكرار يرسخ المعلومة ، وهذا يالضبط ما أود ممارسته خلال هاته الدورة.

كما قلنا <em> لا تعني أنها إشارة إلى الخط المائل ، كما أن <srtong> أيضاً لا تدل على  كتابة الخط العريض .

أطلب منك أن تفتح جُمْجُمَتَك 💀 كي تستوعب الدرس جيداً 🙂 

لكي نكتب أي جملة بالخط المائل في CSS نستعمل font-style   الذي يسمح لنا بكتابة ثلاث قيم  لنوعية االخط في الكتابة :

italc = هذا الخط سيظهر مائلاً

oblique = ستظهر الحروف مائلة لكنها مختلفة بعض الشيئ عن النوع السابق.

normal = هذا الخط سيظهر عادياً بشكل افتراضي. و هنا يمكننا أن نجعل الكتابة المحفوفة بالعلامة <em>  عادية وليست مائلة .

شاهد كيف بمكننا كتابتها في ملف CSS:

 

لكن قبل ذلك أكتب هذا في ملف html

و هذه النتيجة:

من موقع jabism.comتطبيق الخط المائل

🅱️ الخط العريــض

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

و لكتابة الخط بالبند العريض في CSS  فإننا نستعمل  font-weight الذي يستدعي القيم التالية:

bold = وهذا الخط سيظهر عريضاً

normal = هذا الخط سيظهر عادياً بشكل افتراضي ..

مثال على كتابة العنوان بالخط العريض:

 

الرجوع لقائمة المزيد من تنسيقات النصوص 

فكرتين عن“تحديد الخط في CSS”

اترك تعليقًا

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

عدد المشاهدات لهذه المقالة : 706
انتقل إلى أعلى
%d مدونون معجبون بهذه: