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