خاصية font في لغة CSS تُستخدم للتحكم في خصائص الخطوط المُستخدمة في النصوص داخل صفحات الويب. تُعتبر font خاصية مُختصرة (shorthand property) تجمع عدة خصائص فرعية للخط في سطر واحد، مما يُسهل كتابة وتعديل أنماط الخطوط.

الخصائص الفرعية التي تشملها font:

  • font-style: تُحدد نمط الخط، مثل مائل أو عادي. القيم المُمكنة:
    • normal: النمط العادي (القيمة الافتراضية).
    • italic: خط مائل.
    • oblique: خط مائل بشكل اصطناعي (أقل استخدامًا من italic).
  • font-variant: تُحدد ما إذا كان النص سيظهر بأحرف صغيرة كبيرة (small-caps). القيم المُمكنة:
    • normal: النمط العادي (القيمة الافتراضية).
    • small-caps: أحرف كبيرة ولكن بحجم أصغر من الأحرف الكبيرة العادية.
  • font-weight: تُحدد سُمك الخط. القيم المُمكنة:
    • normal: سُمك عادي (القيمة الافتراضية، تُعادل 400).
    • bold: سُمك سميك (تُعادل 700).
    • bolder: سُمك أسمك من العنصر الأب.
    • lighter: سُمك أخف من العنصر الأب.
    • قيم رقمية من 100 إلى 900 (مُضاعفات الـ 100).
  • font-stretch: تُحدد تمدد أو انضغاط الخط. القيم المُمكنة:
    • normal: التمدد العادي (القيمة الافتراضية).
    • wider, narrower: تمدد أو انضغاط الخط بنسبة أكبر أو أقل من العادي.
    • ultra-condensed, extra-condensed, condensed, semi-condensed: درجات مختلفة من الانضغاط.
    • semi-expanded, expanded, extra-expanded, ultra-expanded: درجات مختلفة من التمدد.
  • font-size: تُحدد حجم الخط. القيم المُمكنة:
    • قيم مُطلقة:
      • xx-small, x-small, small, medium, large, x-large, xx-large: أحجام مُحددة مُسبقًا.
      • قيم بوحدات البكسل (px)، أو النقاط (pt)، أو البوصات (in)، أو السنتيمترات (cm)، أو المليمترات (mm).
    • قيم نسبية:
      • em: نسبة إلى حجم الخط للعنصر الأب.
      • rem: نسبة إلى حجم الخط للعنصر الجذري (html).
      • %: نسبة مئوية من حجم الخط للعنصر الأب.
  • line-height: تُحدد ارتفاع السطر. قيمة رقمية بدون وحدات تعني مُضاعفًا لحجم الخط، أو قيمة بوحدات البكسل أو غيرها.
  • font-family: تُحدد عائلة الخط المُستخدمة. قائمة من أسماء الخطوط، حيث يتم تجربة الخطوط بالترتيب حتى يتم العثور على خط مُثبت على جهاز المُستخدم.

صيغة استخدام font:

الصيغة العامة لاستخدام font هي:

CSS
font: font-style font-variant font-weight font-stretch font-size/line-height font-family;

ملاحظات هامة:

  • يجب تحديد font-size و font-family على الأقل عند استخدام font.
  • يمكن استخدام قيم inherit أو initial أو unset لباقي الخصائص الفرعية.
  • ترتيب الخصائص الفرعية مُهم في font.
  • يُفضل استخدام الخصائص الفرعية بشكل مُنفصل للتحكم الدقيق في خصائص الخط، خاصةً في المشاريع الكبيرة.

أمثلة:

CSS
/* مثال باستخدام جميع الخصائص (نادر الاستخدام بهذه الطريقة) */
p {
  font: italic small-caps bold wider 16px/1.5 "Arial", sans-serif;
}

/* مثال عملي أكثر */
h1 {
  font: bold 32px/1.2 "Times New Roman", serif;
}

body {
  font-family: "Helvetica", sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

.highlight {
    font-weight: bold;
}

في هذه الأمثلة:

  • المثال الأول يُوضح استخدام جميع الخصائص الفرعية لـ font، ولكنه نادر الاستخدام بهذه الطريقة.
  • المثال الثاني يُحدد سُمك الخط وحجمه وارتفاع السطر ونوع الخط لعناصر h1.
  • المثال الثالث يُحدد نوع الخط وحجمه وارتفاع السطر لعناصر body.
  • المثال الرابع يُحدد فقط سُمك الخط لعناصر ذات الكلاس highlight.

باختصار، خاصية font تُوفر طريقة مُختصرة للتحكم في خصائص الخطوط في CSS، ولكن يُفضل استخدام الخصائص الفرعية بشكل مُنفصل للتحكم الدقيق والمرونة.