النص والخطوط

اختر خطًا عبر font-family، ثم اضبط الحجم والوزن وتباعد الأسطر للحصول على نص مريح للقراءة.

9 دقيقة · 3 أسئلة

‏الخط هو تصميم الحروف: Arial أو Georgia أو Times New Roman هي خطوط. في CSS، تختار خاصية font-family خط قطعة نصية. تمنحها قائمة من الخطوط مفصولة بفواصل: يجرّب المتصفح الأول؛ فإن لم يكن مثبّتًا على جهاز الزائر، انتقل إلى التالي، وهكذا. إنها خطة أ، وخطة ب، وخطة ج.

body {
  font-family: Georgia, "Times New Roman", serif;
}

الكلمة الأخيرة في القائمة هي عائلة عامة: serif تعني الخطوط ذات الزوائد (الأقدام الصغيرة في أطراف الحروف، كما في صحيفة مطبوعة)، وsans-serif تعني الخطوط بلا زوائد (مظهر أحدث، مثل Arial)، وmonospace تعني الخطوط ثابتة العرض حيث يكون لكل حرف العرض نفسه (مثالية للشيفرة). لاحظ علامتَي التنصيص حول "Times New Roman": فهما مطلوبتان كلما احتوى اسم خط على مسافات.

يُضبط حجم النص عبر font-size. أنت تعرف البكسل مسبقًا (‏16px هو الحجم الافتراضي للمتصفحات). هناك أيضًا وحدة rem: 1rem تساوي الحجم الأساسي للصفحة، إذًا 1.5rem هو مرة ونصف ذلك الحجم. أما الوزن، أي مدى سماكة خطوط الحروف، فيُضبط عبر font-weight: normal للنص العادي، وbold للعريض، أو رقم من 100 (رفيع جدًا) إلى 900 (سميك جدًا)، حيث 400 يعادل normal و700 يعادل bold.

h1 {
  font-size: 2rem;
  font-weight: 700;
}

p {
  font-size: 16px;
  font-weight: normal;
}

إعداد أخير، كثيرًا ما يُهمَل ومع ذلك أساسي للقراءة المريحة: line-height، أي ارتفاع السطر. يتحكّم بالمساحة العمودية بين أسطر الفقرة. إن كانت ضيّقة جدًا، بدت الأسطر خانقة؛ وإن كانت فضفاضة جدًا، ضاعت العين. أفضل ممارسة هي قيمة بلا وحدة، تضرب حجم النص: line-height: 1.5; تجعل ارتفاع كل سطر مرة ونصف حجم الخط.

p {
  font-size: 16px;
  line-height: 1.5;
}

اختبار المعرفة

تأكّد من أنك تذكّرت النقاط الأساسية في هذا الدرس.

1. لماذا تمنح font-family عدة خطوط، مفصولة بفواصل؟
   • لمزج الخطوط داخل كلمة واحدة
   • كي يجرّب المتصفح التالي إذا كان أحد الخطوط مفقودًا
   • لأن صياغة CSS تتطلّب ثلاث قيم على الأقل
2. أي قيمة لـ font-weight تقابل العريض الكلاسيكي (‏bold)؟
   • 100
   • 400
   • 700
   • 900
3. مع font-size: 20px وline-height: 1.5، كم يبلغ ارتفاع كل سطر؟
   • 20 بكسل
   • 25 بكسل
   • 30 بكسل
   • 35 بكسل