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

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

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

 الخط 

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

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

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

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

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

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

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

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

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

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

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

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

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

Italique, gras, souligné…

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

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

الخط المائـل

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

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

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

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

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

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

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

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

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

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

تطبيق الخط المائل

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

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

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

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

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

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

قناتي على اليوتوب

• الحدود الدائرية border-radius في CSS
•  تنسيق النصوص ب CSS
• إضافة اللَّون في CSS
•  إنشاء قوائم نقطية ومرقمة بألوان مختلفة في الووردبريس
• قائمة مقالات حول الووردبريس، الإضافات والقوالب