تحسين تعريفات الخطوط: استيراد أوزان خطوط متعددة باستخدام استعلام @font-face واحد

في السيناريوهات التي تشتمل فيها عائلة الخطوط على أشكال متعددة من الوزن والنمط، قد يصبح استيراد كل شكل على حدة باستخدام استعلامات @font-face المنفصلة أمرًا مملاً. تستكشف هذه المقالة إمكانية دمج هذه الاستعلامات في إعلان واحد.

التحدي: استيراد أوزان خطوط متعددة

فكر في سيناريو يتوفر فيه خط Klavika في إصدارات مختلفة الأوزان والأحجام:

Klavika-Bold-Italic.otf
Klavika-Bold.otf
Klavika-Light-Italic.otf
Klavika-Light.otf
Klavika-Medium-Italic.otf
Klavika-Medium.otf
Klavika-Regular-Italic.otf
Klavika-Regular.otf

تتمثل المهمة في استيراد هذه الاختلافات إلى CSS باستخدام استعلام @font-face واحد يحدد معلمة الوزن. وهذا يلغي الحاجة إلى نسخ الاستعلام ولصقه عدة مرات.

الحل: استخدام بناء جملة @font-face الموسع

ولحسن الحظ، @font-face يوفر نطاقًا ممتدًا بناء الجملة الذي يتيح تعيين قيم مختلفة للوزن والنمط لعائلة خطوط واحدة:

@font-face {
  font-family: 'Klavika';
  src: url(../fonts/Klavika-Regular.otf), weight: normal;
  src: url(../fonts/Klavika-Bold.otf), weight: bold;
}

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

• font-family: يحدد 'Klavika' اسم عائلة الخط.
• src: url(..)، متبوعًا بـ الوزن المقابل، يحدد الملفات المصدر للاختلافات العادية والجريئة.

فوائد استعلامات الخطوط الموحدة

يوفر دمج استعلامات الخطوط العديد من الفوائد:

• تقليل تكرار التعليمات البرمجية: يتجنب استعلامات @font-face المتكررة لكل اختلاف في الوزن.
• تحسين إمكانية القراءة: يحافظ على كود CSS منظمًا وموجزًا .
• صيانة أسهل: يمكن إجراء تغييرات على أوزان الخطوط في مكان واحد.

موارد إضافية

]للحصول على نظرة عامة شاملة حول هذه الميزة واستخدامها القياسي، راجع المقالة التالية: [تركيب جملة @font-face الممتد](https://developer.mozilla.org/en-US/docs/Web/CSS/@font -face.

مثال للقلم

شاهد عرضًا توضيحيًا مباشرًا لهذه التقنية في المثال التالي للقلم: [أوزان الخطوط المتعددة مع استعلام @font-face واحد]( https://codepen.io/anon/pen/abvaqP).