CSS font-variant प्रॉपर्टी

font-variant प्रॉपर्टी

CSS में font-variant प्रॉपर्टी निम्नलिखित प्रॉपर्टीज का शॉर्टहैंड है:

font-variant-caps
font-variant-numeric
font-variant-alternates
font-variant-ligatures
font-variant-east-asian

बुनियादी मान (CSS1/2):

font-variant: normal | small-caps | initial | inherit;

मान:

normal: डिफ़ॉल्ट, कोई वेरिएंट नहीं
small-caps: लोअरकेस अक्षरों को छोटे बड़े अक्षरों (स्मॉल कैप्स) में बदलता है

उदाहरण 1: normal मान

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: linear-gradient(to right, yellow, orange, yellow, green, blue, indigo, violet);
}
.demo {
  text-decoration: overline;
  text-decoration-color: yellow;
  font-variant: normal;
}
</style>
</head>
<body>
<h1>परीक्षा विवरण</h1>
<p class="demo">परीक्षा 20 दिसंबर को।</p>
<p class="demo2">परीक्षा सुबह 9 बजे शुरू होती है।</p>
</body>
</html>

आउटपुट

सामान्य टेक्स्ट रेंडरिंग, इंद्रधनुषी ग्रेडिएंट बैकग्राउंड के साथ।

उदाहरण 2: small-caps मान

<!DOCTYPE html>
<html>
<head>
<style>
.demo {
  text-decoration: overline underline;
  text-decoration-color: blue;
  font-variant: small-caps;
}
</style>
</head>
<body>
<h1>विवरण</h1>
<p class="demo">परीक्षा केंद्र ABC कॉलेज के पास।</p>
<p class="demo2">परीक्षा सुबह 9 बजे शुरू होती है।</p>
</body>
</html>

आउटपुट

सभी लोअरकेस अक्षर छोटे बड़े अक्षरों (स्मॉल कैप्स) में दिखाई देंगे, नीली ओवरलाइन और अंडरलाइन के साथ।

मॉडर्न font-variant सब-प्रॉपर्टीज (CSS3):

सब-प्रॉपर्टी	उद्देश्य	उदाहरण मान
font-variant-caps	कैपिटलाइज़ेशन वेरिएंट्स	small-caps, all-small-caps, petite-caps, unicase, titling-caps
font-variant-numeric	संख्यात्मक फॉर्मेटिंग	lining-nums, oldstyle-nums, proportional-nums, tabular-nums, diagonal-fractions, stacked-fractions, ordinal, slashed-zero
font-variant-ligatures	लिगेचर कंट्रोल	common-ligatures, discretionary-ligatures, historical-ligatures, contextual
font-variant-east-asian	पूर्वी एशियाई टाइपोग्राफी	jis78, jis83, jis90, jis04, simplified, traditional, full-width, proportional-width, ruby
font-variant-alternates	वैकल्पिक ग्लिफ्स	historical-forms, styleset(), character-variant(), swash(), ornaments(), annotation()

उदाहरण: मॉडर्न सिंटैक्स

.advanced-typography {
  font-variant-caps: small-caps;
  font-variant-numeric: oldstyle-nums proportional-nums;
  font-variant-ligatures: common-ligatures contextual;
}

ब्राउज़र सपोर्ट:

small-caps: सभी ब्राउज़र्स
सब-प्रॉपर्टीज: आधुनिक ब्राउज़र्स (कुछ आंशिक सपोर्ट)
फॉन्ट में संबंधित ग्लिफ्स होने चाहिए