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

 


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

Italique, gras, souligné…

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

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

الخط المائـل

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

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

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

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

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

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

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

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

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

 

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

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

تحديد الخط في CSSتطبيق الخط المائل

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

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

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

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

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

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

 

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

 


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

 

شَـاركِ الْمَوْضُوع:
إذا أعجبك هذا المحتوى، فلا تَقْرَأْ وتَرْحَل .. تَـعْلِيقَـاتُكَ تَـشْجِيعٌ لَـنَـا لِنَسْتَمِرَّ فِــي الْبَحْثِ وَالْعَطَـاء. وإِذَا كنت تعتقد أنه قد يكون مفيداً لأشخاص آخرين، فشَارِكْهَ على الشبكات الاجتماعية.

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

اترك تعليقاً

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

حول الكاتب :   من أقصى شمال المغرب كاتب مقالات إلكترونية حول كيفية بناء موقع ويب ناجح : ووردبريس ، HTML ، CSS .ومواضيع مختلفة وناشط على اليوتيوب في قناة: Jabism Web و رحيل الليل
كتب 445 مقالة في jabism.com.
-:- راسلني   -:- تابعني على تويتر   -:- تابعني على الفايسبوك

304 عدد المشاهدات لهذا المحتوى
Scroll to Top