CSS font-variant प्रॉपर्टी का उपयोग करके अपने टेक्स्ट के लिए स्मॉल कैप्स लेटर्स का उपयोग करना सीखें - और क्या आपको स्मॉल कैप्स का उपयोग करना चाहिए।
CSS font-variant प्रॉपर्टी निर्दिष्ट करती है कि आपका टेक्स्ट सामान्य टेक्स्ट केस के रूप में प्रदर्शित हो या स्मॉल-कैप्स फ़ॉन्ट के रूप में। प्रॉपर्टी के तीन मान हैं:
- normal (डिफ़ॉल्ट टेक्स्ट केस)
- inherit
- small-caps
बुनियादी उपयोग:
.small-caps { font-variant: small-caps; }इससे पहले कि आप font-variant प्रॉपर्टी का उपयोग शुरू करें, सुनिश्चित करें कि आप समझते हैं कि इसका सही तरीके से क्या, कब, और कैसे उपयोग करना है (कई नहीं समझते)।
आइए सामान्य टेक्स्ट और स्मॉल कैप्स के बीच अंतर को परिभाषित करके शुरू करें:
- सामान्य टेक्स्ट केस, जिसे सेंटेंस केस भी कहा जाता है, का अर्थ नियमित टेक्स्ट है जैसे यह वाक्य, जहां वाक्य में पहले शब्द का पहला अक्षर कैपिटलाइज़्ड होता है।
- स्मॉल कैप्स छोटे कैपिटल लेटर्स हैं जिन्हें लोअरकेस लेटर्स के साथ मिश्रण करने के लिए डिज़ाइन किया गया है (समान x-हाइट का उपयोग करके)।
दुर्भाग्य से, कई वेब फॉन्ट्स में असली स्मॉल कैप्स नहीं होते।
यदि आप अपने किसी टेक्स्ट को font-variant: small-caps; पर सेट करते हैं तो आपको या तो मिलेगा:
- शानदार दिखने वाले, सावधानीपूर्वक डिज़ाइन किए गए स्मॉल-कैप्स जो आपके सामान्य/सेंटेंस केस टेक्स्ट के साथ सहजता से मिश्रित होते हैं, जैसे आपने पहले उदाहरण देखा 👌
- नकली कंप्यूटर-जनरेटेड स्मॉल-कैप्स जो आपके सामान्य/सेंटेंस केस टेक्स्ट के साथ अच्छी तरह से मिश्रित नहीं होते — और आपको अनप्रोफेशनल दिखाते हैं 😒
असली स्मॉल कैप्स उदाहरण
यहां एक असली स्मॉल कैप्स फ़ॉन्ट का उदाहरण है जो सामान्य/सेंटेंस केस के साथ पूरी तरह से मिश्रित होता है:
उपरोक्त उदाहरण में यह इतनी अच्छी तरह से काम करता है क्योंकि उपयोग किया गया फ़ॉन्ट परिवार, Alegreya, असली स्मॉल कैप्स प्रदान करता है।
नकली स्मॉल कैप्स उदाहरण
यहां एक नकली स्मॉल-कैप्स फ़ॉन्ट का उदाहरण है:
ध्यान दें कि ये स्मॉल कैप्स नियमित टेक्स्ट केस के साथ स्वाभाविक रूप से मिश्रित नहीं होते।
उपरोक्त उदाहरण भी Alegreya का उपयोग कर रहा है, हालांकि मैंने Alegreya SC फ़ॉन्ट फेस को अक्षम कर दिया ताकि आप देख सकें कि यह नकली स्मॉल कैप्स फ़ॉन्ट के साथ कैसा दिखता है।
आपके टेक्स्ट का font-variant: small-caps के साथ कैसा दिखता है यह इस बात से निर्धारित होता है कि आपकी पसंद का टाइपफेस (फ़ॉन्ट परिवार) असली स्मॉल कैप्स प्रदान करता है या नहीं।
दुर्भाग्य से, असली स्मॉल कैप्स दुर्लभ हैं। इसलिए इससे पहले कि आप अपने CSS स्टाइलशीट में font-variant: small-caps का उपयोग करने के बारे में सोचें, निम्न कार्य करें:
- शोध करें कि क्या आपके टाइपफेस में असली स्मॉल-कैप्स हैं (यदि हैं, तो यह टाइपफेस डिज़ाइनर द्वारा निर्दिष्ट है। इसे देखें।)
- यदि हैं, तो सुनिश्चित करें कि वे सही ढंग से सक्षम हैं।
अन्यथा, इस प्रॉपर्टी का उपयोग करने के बारे में भूल जाएं।
सौभाग्य से, font-variant प्रॉपर्टी स्वचालित रूप से फ़ॉन्ट में OpenType स्मॉल कैप्स तक पहुंच जाएगी यदि वे मौजूद हैं। हालांकि, आपको अभी भी उन्हें अपनी परियोजना में आयात करने की आवश्यकता है (ठीक वैसे ही जैसे आप अपने अन्य फॉन्ट्स आयात करते हैं)। यदि आप नहीं करते हैं, तो font-variant प्रॉपर्टी फॉलबैक के रूप में कंप्यूटर-जनरेटेड कचरा स्मॉल कैप्स का उपयोग करेगी — जो आप नहीं चाहते।
