📝 CSS Font Properties

CSS की Font Properties का उपयोग HTML elements के text की appearance, style, size और typeface को control करने के लिए किया जाता है।

इन properties की मदद से हम webpage के text को:

• Attractive बना सकते हैं।
• Readable बना सकते हैं।
• Font का size और style change कर सकते हैं।
• Text को bold या light कर सकते हैं।
• पूरे webpage में एक consistent font style maintain कर सकते हैं।

CSS में commonly used Font Properties हैं:

1. font-family
2. font-size
3. font-style
4. font-weight
5. font-variant
6. font → Shorthand Property

इसके अलावा text की readability के लिए line-height और letter-spacing भी बहुत useful properties हैं।

---

🔹 1. font-family

font-family property text के font/typeface को define करती है।

हम एक से ज्यादा fonts भी लिख सकते हैं। अगर पहला font user's computer/browser पर available नहीं है, तो browser next available font को use करने की कोशिश करता है।

Syntax:

font-family: monospace, Arial, sans-serif;

इसमें browser पहले monospace को check करेगा।

अगर वह available नहीं है, तो Arial try करेगा और उसके बाद sans-serif को fallback के रूप में use करेगा।

Example:

p {
  font-family: Arial, sans-serif;
}

Important:

Multiple fonts लिखते समय उन्हें comma , से separate किया जाता है।

font-family: "Poppins", Arial, sans-serif;

"Poppins" जैसे font name में space होने पर उसे quotes में लिखना common practice है।

याद रखें:

font-family → कौन-सा Font?

---

🔹 2. font-size

font-size property text का size define करती है।

इससे हम text को छोटा या बड़ा कर सकते हैं।

Syntax:

p {
  font-size: 18px;
}

इस example में paragraph का font size 18px होगा।

---

🔸 Common Units

px — Pixels

यह एक commonly used unit है।

font-size: 18px;

यह text size को 18px set करता है।

em

em एक relative unit है, जो parent element के font size के reference से calculate हो सकती है।

h1 {
  font-size: 2em;
}

यदि parent का font size 16px है, तो सामान्य calculation के अनुसार:

2em = 2 × 16px = 32px

%

Percentage भी parent के font size के reference में relative हो सकता है।

p {
  font-size: 120%;
}

vw / vh

ये viewport के size के relative units हैं।

• vw → viewport width के relative
• vh → viewport height के relative

इनका उपयोग responsive designs में किया जा सकता है।

याद रखें:

font-size → Text कितना बड़ा/छोटा?

---

🔹 3. font-style

font-style property text का style define करती है।

Main Values:

• normal → Normal/default style
• italic → Italic style
• oblique → Slanted style

Example:

p {
  font-style: italic;
}

इससे paragraph का text italic दिखाई देगा।

Difference:

italic में font का designed italic version available हो सकता है, जबकि oblique सामान्यतः text को slant करने वाला style होता है।

याद रखें:

font-style → Text का Style

---

🔹 4. font-weight

font-weight property text को कितना bold या light दिखाना है, यह define करती है।

Common Values:

• normal
• bold
• bolder
• lighter

इसके अलावा numeric values भी दी जा सकती हैं:

100 – 900

जैसे:

p {
  font-weight: 400;
}

और:

h1 {
  font-weight: 700;
}

Generally:

• 400 → Normal weight के आसपास
• 700 → Bold weight के आसपास

लेकिन actual appearance font family पर depend कर सकती है।

Example:

h1 {
  font-weight: bold;
}

p {
  font-weight: 400;
}

याद रखें:

font-weight → Text कितना Bold/Light?

---

🔹 5. font-variant

font-variant property text को small-caps style में display करने के लिए use की जा सकती है।

small-caps

इसमें lowercase letters भी small uppercase letters जैसे दिखाई देते हैं।

Example:

p {
  font-variant: small-caps;
}

उदाहरण के लिए normal text:

This is a paragraph.

Small-caps style में letters uppercase appearance के साथ दिखाई दे सकते हैं, लेकिन lowercase letters की size comparatively छोटी रहती है।

याद रखें:

font-variant → Small Caps

---

🔹 6. font — Shorthand Property

font एक shorthand property है।

इसकी मदद से हम कई font properties को एक ही line में set कर सकते हैं।

Basic Order:

font: font-style font-variant font-weight font-size/line-height font-family;

इसका मतलब सामान्य रूप से order इस प्रकार है:

style → variant → weight → size/line-height → family

Example:

p {
  font: italic small-caps bold 20px/30px "Poppins", sans-serif;
}

इसमें:

• italic → font-style
• small-caps → font-variant
• bold → font-weight
• 20px → font-size
• 30px → line-height
• "Poppins", sans-serif → font-family

Important:

font-size और font-family shorthand में important required components हैं। line-height optional है और उसे / के बाद लिखा जाता है।

---

🔹 7. letter-spacing Property

आपके combined example में letter-spacing भी use किया गया है।

यह property letters के बीच की horizontal spacing को control करती है।

Example:

p {
  letter-spacing: 1px;
}

इससे हर character के बीच थोड़ा extra space आएगा।

याद रखें:

letter-spacing → Letters के बीच की दूरी

---

🔹 8. line-height Property

line-height property text की दो lines के बीच की vertical spacing को control करती है।

यह text को ज्यादा readable बनाने में helpful होती है।

Example:

p {
  line-height: 1.8;
}

इससे paragraph की lines के बीच appropriate extra space मिलेगा।

अगर line-height बहुत कम हो, तो lines एक-दूसरे के बहुत पास दिखाई दे सकती हैं।

याद रखें:

line-height → Lines के बीच की दूरी

---

⭐ Example — All Font Properties Combined

अब सभी important font properties को एक साथ देखते हैं:

<style>
p {
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-style: italic;
  font-weight: 600;
  font-variant: small-caps;
  letter-spacing: 1px;
  line-height: 1.8;
}
</style>

<p>This is an example of CSS font properties.</p>

इस example में:

Property	Value	काम
font-family	"Poppins", sans-serif	Font type define करता है
font-size	18px	Text का size set करता है
font-style	italic	Text को italic करता है
font-weight	600	Text की thickness set करता है
font-variant	small-caps	Small-caps appearance देता है
letter-spacing	1px	Letters के बीच spacing देता है
line-height	1.8	Lines के बीच spacing देता है

---

🧠 Quick Revision

Property	Easy Meaning
font-family	कौन-सा font?
font-size	कितना बड़ा/छोटा?
font-style	कैसा style?
font-weight	कितना bold/light?
font-variant	Small-caps चाहिए?
letter-spacing	Letters के बीच कितनी दूरी?
line-height	Lines के बीच कितनी दूरी?
font	Multiple font properties एक साथ

---