फ़ॉन्ट-संस्करण - सीएसएस-ट्रिक्स

font-variantसंपत्ति आप छोटे केप्स के लिए लक्षित पाठ बदलने के लिए अनुमति देता है। यह संपत्ति CSS3 में विस्तारित की गई है।

p:first-line ( font-variant: small-caps; /* default is `normal` */ )

CSS3 से पहले, इस संपत्ति ने दो संभावित मूल्यों में से एक को स्वीकार किया: normal(पाठ डिफ़ॉल्ट रूप से कैसे प्रस्तुत किया गया है) और small-caps।

एक मान small-capsअपरकेस अक्षरों में पाठ को प्रस्तुत करेगा जो नियमित अपरकेस अक्षरों से छोटा है। यह मार्कअप के अंदर, सामग्री में सेट अपरकेसिंग को ओवरराइड नहीं करता है। उदाहरण के लिए:

इस पेन को देखें!

उपरोक्त डेमो में, दोनों पैराग्राफ सेट किए गए हैं font-variant: small-caps। पहले पैराग्राफ में मार्कअप में केवल पहला अक्षर अपरकेस होता है, इसलिए यह अपेक्षित रूप में प्रकट होता है (पहला अक्षर अपरकेस, शेष छोटे अक्षरों में)।

दूसरी लाइन मार्कअप में सभी अपरकेस में लिखी गई है, जो small-capsमूल्य को ओवरराइड करती है , नियमित रूप से अपरकेस में सब कुछ सेट करती है।

इसे आगे बढ़ाते हुए, यदि ये अनुच्छेद निर्धारित किए जाते हैं font-variant: small-capsऔर text-transform: lowercaseफिर, वे सभी छोटे कैप में दिखाई देंगे। इसी तरह, अगर ये पैराग्राफ सेट किए गए हैं font-variant: small-capsऔर text-transform: uppercaseफिर, वे सभी नियमित अपरकेस में दिखाई देंगे।

font-variantएक fontआशुलिपि घोषणा के हिस्से के रूप में शामिल किया जा सकता है ।

CSS3 में नई परिवर्धन

CSS3 में, font-variantएक आशुलिपि बन जाता है और साथ-साथ कई मूल्यों, स्वीकार कर सकते हैं all-small-caps, petite-caps, all-petite-caps, titling-caps, और unicaseदूसरों के बीच।

ब्राउज़र का समर्थन

क्रोम	सफारी	फ़ायर्फ़ॉक्स	ओपेरा	अर्थात	एंड्रॉयड	आईओएस
काम करता है	काम करता है	काम करता है	काम करता है	काम करता है	काम करता है	काम करता है

CSS3 में जोड़े गए नए मूल्यों का कोई ब्राउज़र समर्थन नहीं है, इसलिए ऊपर दी गई तालिका मूल्य के समर्थन का प्रतिनिधित्व करती है small-caps।

IE6 / 7 में, सेटिंग font-variant: small-capsकिसी भी पाठ सेट text-transform: uppercaseया text-transform: lowercaseजैसा दिखने के लिए कारण होगा text-transform: none।