خاصية font المختصرة في CSS

كما هو الحال في خصائص كثيرة في CSS فإنه يمكن جمعها (اختصارها) في خاصية واحده توفيراً للوقت والجهد، فمثلاً الخواص:

يمكن جمعها في خاصية واحدة :

وبما ان القيم متشابه فيمكن اختصار هذة القيم أيضاً إلى :

خاصية font المختصرةكذلك جميع خصائص الخط يمكن جمعها في خاصية واحده، تسمى font ولكن لابد من ترتيب الخواص التي سنقوم بجمعها في الخاصية font بالترتيب التالي:

1. font-style
2. font-variant
3. font-weight
4. font-size
5. line-height
6. font-family

أي أنه يمكنك جمع ستة خواص في خاصية واحدة هكذا:

يتم كتابة الخواص بهذا الترتيب، مع مراعاة ضرورة وضح شرطة مائلة / بين خاصية font-size وخاصية line-height . لكن ليس شرطاً كتابة الست خواص في كل مرة تستخدم الخاصية font فقط يلزمك الخاصيتين font-size و font-family ويمكنك تجاهل الخواص الأخرى إذا كنت تريد إبقائها على قيمها الإفتراضية:

تذكر عدم تجاوز (override) القيم

إذا قمت بتعريف أحد خواص الخط مسبقاً، ولتكن الخاصية line-height للعنصر الأب، ثم قمت بتعريف القيمة المختصرة font لأحد العناصر الأبناء، فإنه سيتم تجاوز الخواص التي لم يتم تعريفها في الخاصية المختصرة للعنصر الأبن:

في هذا المثال، تم تعريف خواص حجم الخط، وارتفاعه للعنصر الأب body ، ثم بعد ذلك في أحد العناصر الأبناء ul قمنا بتعريف الخاصية المختصرة font ولكنها لا تحتوي على قيمة الخاصية line-height ، فإنه سيتم تجاوز القيمة الموروثة من العنصر الأب 1.5 وسيتم استخدام القيمة الإفتراضية للخاصية line-height للعنصر ul وهي القيمة medium . (غالباً تكون قيمتها الإفتراضية ١.٢)
أيضاً يمكنك استخدام الخواص المختصرة للكثير من الخصائص مثل:

• margin
• border
• list-style
• background
• transform
• transition