34. اختصار الخط وعيوب الطباعة الشائعة

لكتابة CSS أكثر إيجازاً، تسمح لك خاصية الاختصار font بتعيين خصائص خطوط متعددة في وقت واحد.

اختصار font

يمكن لهذه الخاصية تعيين font-style و font-variant و font-weight و font-stretch و font-size و line-height و font-family.

الترتيب المطلوب: يجب أن يتوفر font-size و font-family ، ويجب أن يكونا الأخيرين في القائمة. يتم تحديد line-height بعد الحجم، ويفصل بينهما شرطة مائلة (/).

css /* التنسيق: النمط الوزن الحجم/ارتفاع-السطر العائلة */

.shorthand-text { font: italic bold 1.2rem/1.5 'Roboto', sans-serif; /* ما يعادل: font-style: italic; font-weight: bold; font-size: 1.2rem; line-height: 1.5; font-family: 'Roboto', sans-serif; */ }

عيوب الطباعة الشائعة

1. بكسلات ثابتة للخطوط: استخدام px لـ font-size (بدلاً من rem أو em) يمنع المستخدمين من تغيير حجم النص في إعدادات المتصفح، مما يفشل في معايير إمكانية الوصول.
2. فقدان البدائل (Fallbacks): لا تقم أبداً بتعريف font-family بدون بديل عام (sans-serif أو serif). إذا فشل تحميل خطك المخصص، ستتعطل الصفحة بصرياً.
3. كثرة أوزان الخطوط: تحميل 10 أوزان خطوط مختلفة (100، 200، 300...) يزيد بشكل كبير من وقت تحميل الصفحة. قم فقط بتحميل الأوزان التي تستخدمها بالفعل (مثل 400 و 700).
4. التباين المنخفض: تأكد من أن لون النص ولون الخلفية لهما تباين كافٍ، خاصة للنصوص الصغيرة، لتلبية إرشادات إمكانية الوصول WCAG.