फ़ॉन्ट घोषणाओं को अनुकूलित करना: एक @फ़ॉन्ट-फेस क्वेरी के साथ एकाधिक फ़ॉन्ट भार आयात करना

ऐसे परिदृश्यों में जहां एक फ़ॉन्ट परिवार में कई प्रकार शामिल होते हैं वजन और शैली, अलग-अलग @फ़ॉन्ट-फेस क्वेरीज़ का उपयोग करके प्रत्येक भिन्नता को व्यक्तिगत रूप से आयात करना कठिन हो सकता है। यह आलेख इन प्रश्नों को एक ही घोषणा में समेकित करने की संभावना तलाशता है। वजन और आकार:

क्लाविका-बोल्ड-इटैलिक.ओटीएफ क्लाविका-बोल्ड.ओटीएफ क्लाविका-लाइट-इटैलिक.ओटीएफ क्लाविका-लाइट.ओटीएफ क्लाविका-मध्यम-इटैलिक.ओटीएफ क्लाविका-मीडियम.ओटीएफ क्लाविका-रेगुलर-इटैलिक.ओटीएफ Kravika-Regular.otfकार्य एकल @font-face क्वेरी का उपयोग करके इन विविधताओं को CSS में आयात करना है जो वजन पैरामीटर को परिभाषित करता है। इससे क्वेरी को कई बार कॉपी और पेस्ट करने की आवश्यकता समाप्त हो जाती है। वाक्यविन्यास जो एक ही फ़ॉन्ट परिवार के लिए अलग-अलग वजन और शैली मानों को निर्दिष्ट करने में सक्षम बनाता है:

@font-face { फ़ॉन्ट-फ़ैमिली: 'क्लेविका'; src: url(../fonts/KLVika-Regular.otf), वजन: सामान्य; src: url(../fonts/KLVika-Bold.otf), वजन: बोल्ड; }

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

src: url(..), उसके बाद संगत वजन, नियमित और बोल्ड विविधताओं के लिए स्रोत फ़ाइलों को निर्दिष्ट करता है।

कोड दोहराव में कमी:

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

बेहतर पठनीयता:

• आसान रखरखाव:
• फ़ॉन्ट भार में परिवर्तन एक ही स्थान पर किया जा सकता है।

अतिरिक्त संसाधन

इस सुविधा और इसके मानक उपयोग के व्यापक अवलोकन के लिए, निम्नलिखित लेख देखें: [विस्तारित @फ़ॉन्ट-फेस सिंटैक्स](https://developer.mozilla.org/en-US/docs/Web/CSS/@font -चेहरा।

• उदाहरण पेन
निम्नलिखित उदाहरण पेन में इस तकनीक का लाइव प्रदर्शन देखें: [एकल @फॉन्ट-फेस क्वेरी के साथ एकाधिक फ़ॉन्ट वजन]( https://codepen.io/anon/pen/abvaqP).