هل يمكن تحديد أوزان الخطوط المتعددة باستخدام استعلام @font-face واحد؟

يأتي خط Klavika بأوزان وأشكال مختلفة. هل يمكن استيرادها إلى CSS باستخدام استعلام @font-face واحد يحدد الوزن؟

الحل:

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

@font-face {
  font-family: "DroidSerif";
  src: url("DroidSerif-Regular-webfont.ttf") format("truetype");  /* Normal weight, normal style */
  src: url("DroidSerif-Italic-webfont.ttf") format("truetype"); /* Normal weight, italic style */
  src: url("DroidSerif-Bold-webfont.ttf") format("truetype");  /* Bold weight, normal style */
  src: url("DroidSerif-BoldItalic-webfont.ttf") format("truetype"); /* Bold weight, italic style */
}

يمكنك الآن تحديد وزن الخط: غامق أو نمط الخط: مائل لعناصر مختلفة:

body { font-family:"DroidSerif", Georgia, serif; }

h1 { font-weight:bold; }

em { font-style:italic; }

strong em {
  font-weight:bold;
  font-style:italic;
}

للحصول على تفاصيل شاملة حول هذه الميزة، راجع الوثائق الرسمية.

مثال:

[مثال القلم] (https://codepen .io/anon/pen/EjxVqv)