← Back to CSS Course | Chapter 4: Text & Fonts | Lesson 5 of 10

CSS Font Advanced

Modern font files सिर्फ letter shapes से कहीं ज़्यादा हैं -- कई small caps, old-style numerals, और ligatures जैसी extra features bundle करते हैं, बिल्कुल वैसे ही जैसे कोई professional design tool optional typographic flourishes offer करता है। ये advanced font properties उन hidden features को unlock करती हैं, और आपको basic font-family और font-size से आगे spacing और fallback behavior को detail के एक level पर fine-tune करने देती हैं।

In this page:

  1. font-feature-settings से OpenType Features Unlock करना
  2. font-kerning से Letter Spacing Adjust करना
  3. font-size-adjust से Fallback Sizes Balance करना
  4. font-stretch से Text को Widen और Narrow करना
  5. font-variant-caps से Capital Styles Switch करना
Syntax
css 
selector {
  font: style weight size / line-height family;
  font-variant: small-caps;
}

font-feature-settings से OpenType Features Unlock करना

कई professional font files optional OpenType features bundle करते हैं -- जैसे stylistic ligatures, old-style figures, या fraction glyphs -- जो default रूप से बंद होते हैं। font-feature-settings आपको किसी specific feature को उसके चार-अक्षर के OpenType tag से चालू करने देता है, जैसे standard ligatures के लिए "liga" या old-style numerals के लिए "onum"।

Note:
  • पहले font के specimen page या OpenType feature list check करें, क्योंकि font-feature-settings सिर्फ उन tags के लिए काम करता है जिन्हें specific font file असल में implement करती है।
  • Accepted values:
  • normal — default features (initial value)
  • "liga" 0 — एक feature बंद करता है
  • "smcp" 1 — small caps चालू करता है
  • "tnum" — tabular numbers
  • "ss01" — stylistic set 1
  • inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
Warning: अगर loaded font में वह particular OpenType feature शामिल नहीं है, तो font-feature-settings चुपचाप कुछ नहीं करता, बिना किसी error या warning के।

उदाहरण: Unlocking OpenType Features with font-feature-settings

css 
<style>
p {
  font-feature-settings: "liga" 1;
}
</style>
<p>Text with standard ligatures enabled</p>

font-kerning से Letter Spacing Adjust करना

Kerning specific letter pairs (जैसे "A" और "V") के बीच किया गया एक छोटा spacing adjustment है ताकि वे उनकी default character widths की तुलना में visually एक-दूसरे के करीब बैठें। font-kerning: normal इसे explicitly चालू करता है, जबकि font-kerning: none इसे disable कर देता है, हर character को उसकी raw, unadjusted spacing देते हुए।

Note:
  • लगभग हर case में font-kerning को उसके default auto पर छोड़ें, क्योंकि modern browsers बिना extra configuration के पहले से ही sensibly kerning apply करते हैं।
  • Accepted values:
  • auto — browser तय करता है (initial value)
  • normal — kerning लागू होती है
  • none — kerning disabled है
  • inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
Warning: font-kerning: none से kerning disable करना खासतौर पर headline text को noticeably loose और unevenly spaced दिखा सकता है।

उदाहरण: Adjusting Letter Spacing with font-kerning

css 
<style>
.normal { font-kerning: normal; }
.none { font-kerning: none; }
</style>
<p class="normal">AVATAR — kerned</p>
<p class="none">AVATAR — unkerned</p>

font-size-adjust से Fallback Sizes Balance करना

अलग-अलग font families एक ही font-size पर set होने पर भी काफ़ी अलग size के दिख सकते हैं, क्योंकि उनके lowercase letters overall line height का अलग-अलग proportion occupy करते हैं। font-size-adjust आपको एक target aspect ratio specify करने देता है ताकि अगर primary font load न हो और fallback इस्तेमाल हो, तो fallback को automatically resize करके visually match किया जा सके।

Note:
  • अपने primary font की x-height ratio के आधार पर font-size-adjust set करें ताकि custom font load न होने पर fallback fonts visually consistent रहें।
  • Accepted values:
  • none — कोई adjustment नहीं (initial value)
  • number — aspect value, जैसे 0.5
  • from-font — font की अपनी aspect value इस्तेमाल करता है
  • inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
Warning: font-size-adjust के बिना, एक fallback font आपकी intended font से उसी exact font-size value पर भी noticeably बड़ा या छोटा दिख सकता है।

उदाहरण: Balancing Fallback Sizes with font-size-adjust

css 
<style>
p {
  font-family: "CustomFont", sans-serif;
  font-size-adjust: 0.5;
}
</style>
<p>Fallback font resized to visually match the custom font</p>

font-stretch से Text को Widen और Narrow करना

font-stretch किसी font family का एक condensed या expanded width variant select करता है, बशर्ते font file असल में वे variants ship करती हो (जैसे कई variable fonts अब करती हैं)।

transform: scaleX() के उलट, जो letterforms को squash करके distort करता है, font-stretch genuinely redesigned, narrower या wider glyph shapes swap in करता है।

Note:
  • font-stretch पर निर्भर होने से पहले check करें कि क्या आपका font एक width axis वाला variable font है, क्योंकि condensed cuts के बिना static fonts इसे बस नज़रअंदाज़ कर देंगे।
  • Accepted values:
  • normal — standard width (initial value)
  • condensed — narrower faces
  • expanded — wider faces
  • percentage — 50% से 200%
  • ultra-condensed / semi-condensed / semi-expanded / ultra-expanded — दूसरे steps
  • inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
Warning: font-stretch का उन fonts पर कोई visible effect नहीं होता जो condensed या expanded variants ship नहीं करते, और यह workaround के तौर पर font को distort नहीं करेगा।

उदाहरण: Widening and Narrowing Text with font-stretch

css 
<style>
.condensed {
  font-stretch: condensed;
}
.expanded {
  font-stretch: expanded;
}
</style>
<p class="condensed">Condensed variant</p>
<p class="expanded">Expanded variant</p>

font-variant-caps से Capital Styles Switch करना

font-variant-caps plain text-transform: uppercase से आगे अलग-अलग capitalization treatments के बीच switch करता है -- small-caps (छोटे capitals की तरह render होने वाले lowercase letters) और all-small-caps (match करने के लिए shrink किए गए uppercase letters) सहित।

अच्छी तरह designed fonts regular capitals को सिर्फ scale down करने के बजाय genuine small-cap glyphs शामिल करते हैं।

Note:
  • जब आपको classic "small capitals" typographic look चाहिए, full-size capitals नहीं, तो text-transform: uppercase से ज़्यादा font-variant-caps: small-caps prefer करें।
  • Accepted values:
  • normal — regular capitals (initial value)
  • small-caps — lowercase छोटे capitals की तरह दिखाया जाता है
  • all-small-caps — सभी letters छोटे capitals की तरह
  • petite-caps | all-petite-caps — petite capitals (lowercase के लिए, या सभी letters के लिए)
  • unicase | titling-caps — mixed और titling forms
  • inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
Warning: असली small-caps glyphs के बिना fonts synthetically shrunk regular capitals पर fall back करते हैं, जो genuine small-caps से पतले और कम polished दिख सकते हैं।

उदाहरण: Switching Capital Styles with font-variant-caps

css 
<style>
.small-caps {
  font-variant-caps: small-caps;
}
</style>
<p class="small-caps">Small Capitals Look</p>
Live Example
Related Topics

CSS Text Advanced · CSS Advanced Dropdowns · CSS Fonts · CSS Custom Fonts

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
आम गलतियां
  1. यह मान लेना कि font-feature-settings हर font पर काम करता है, जबकि specific OpenType feature इस्तेमाल की जा रही font file में असल में built-in होनी चाहिए।
  2. font-stretch को transform: scaleX() के साथ confuse करना, जबकि font-stretch सिर्फ तभी काम करता है जब font family genuine condensed या expanded variants ship करती हो।
  3. font-variant-caps: small-caps इस्तेमाल करना और असली small-caps glyphs की उम्मीद करना, जबकि कई fonts इसके बजाय shrunken regular capitals पर fall back करते हैं।
चैप्टर सारांश
  • font-feature-settings और font-variant-caps ligatures, old-style numerals, और असली small caps जैसे OpenType typographic features unlock करते हैं।
  • font-kerning control करता है कि character-pair spacing adjustments (जैसे "A" और "V" के बीच tight fit) लागू होते हैं या नहीं।
  • font-stretch और font-size-adjust क्रमशः किसी font की width और fallback sizing behavior fine-tune करते हैं।
ब्राउज़र सपोर्ट

font-kerning और font-variant-caps हर modern browser में supported हैं; font-feature-settings और font-stretch को visible effect के लिए loaded font file में relevant OpenType variation data असल में शामिल होना चाहिए।

🔒

Chapter Quiz — Complete all 10 topics to unlock

0/10 topics done

Complete these topics first:

← Previous Lesson CSS Fonts Next Lesson → CSS Custom Fonts

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.