CSS Font Property का उपयोग कैसे करें? हिन्दी में पूरी जानकारी

अगर आप अपने वेबपेज का टेक्स्ट सुंदर और पढ़ने योग्य बनाना चाहते हैं, तो CSS Font Property आपके लिए सबसे जरूरी चीजों में से एक है। इस आर्टिकल में आप जानेंगे कि CSS Font Property in Hindi क्या होती है, कौन-कौन सी properties होती हैं, और उनका प्रयोग कैसे किया जाता है – वह भी उदाहरणों के साथ।

Font से जुड़े CSS Properties कौन-कौन से हैं?

नीचे दिए गए font से संबंधित मुख्य CSS प्रॉपर्टीज़ को जानिए:

• font-family: टेक्स्ट के लिए कौन सा फॉन्ट इस्तेमाल हो
• font-size: टेक्स्ट का आकार (Size)
• font-style: टेक्स्ट को italic या normal बनाना
• font-weight: टेक्स्ट को bold, normal या light बनाना
• font-variant: टेक्स्ट को small-caps में बदलना
• line-height: लाइन के बीच की ऊँचाई
• font: shorthand property (एक लाइन में सभी Font settings)

1. font-family क्या है?

यह property उस font को सेट करती है जिससे टेक्स्ट दिखाया जाएगा।

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

नोट: हमेशा fallback fonts दें, ताकि अगर एक font उपलब्ध न हो तो दूसरा लगे।

2. font-size क्या है?

Font Size वह property है जिसका उपयोग किसी टेक्स्ट की साइज़ (आकार) निर्धारित करने के लिए किया जाता है। वेबसाइट डिज़ाइन में यह एक बहुत ही महत्वपूर्ण CSS प्रॉपर्टी है क्योंकि यह यूज़र की पढ़ने की क्षमता को सीधे प्रभावित करती है।

वेब डिज़ाइन में टेक्स्ट की readability और accessibility बनाए रखने के लिए font size का सही इस्तेमाल बेहद ज़रूरी है। headings और paragraphs के लिए सही टैग (<h1> से <h6>, <p>) और उनके साथ उपयुक्त font size का इस्तेमाल SEO और user experience दोनों को बेहतर बनाता है।

p {
  font-size: 18px;
}
  

Size units: px, em, rem, %, vw

Font Size के दो प्रकार

1. Absolute Font Size

• Font का आकार fix रहता है
• यूज़र ब्राउज़र में size को आसानी से बदल नहीं सकता
• Printing या physical display के लिए उपयोगी
• उदाहरण: px, pt, cm

2. Relative Font Size

• पास के elements की तुलना में आकार तय होता है
• यूज़र ब्राउज़र में size बदल सकता है
• Accessibility और responsive design के लिए बेहतर
• उदाहरण: em, rem, %

अगर आप कोई font size नहीं लगाते हैं, तो ज्यादातर ब्राउज़र्स में default size 16px होती है।

यह 1em के बराबर होता है: 1em = 16px

3. font-style क्या है?

font-style CSS की एक text formatting property है, जिसका प्रयोग text को italic, oblique, या normal रूप में दिखाने के लिए किया जाता है। यह style आमतौर पर किसी महत्वपूर्ण शब्द, उद्धरण (quote), या स्टाइलिश टेक्स्ट दिखाने के लिए प्रयोग की जाती है।

Font Style के तीन प्रमुख वैल्यू

• normal: यह default वैल्यू होती है और टेक्स्ट सामान्य रूप से दिखता है।
• italic: टेक्स्ट को टेढ़ा (italicized) बना देता है, जैसे कि किताबों में जोर देने के लिए शब्दों को italic किया जाता है।
• oblique: यह भी टेक्स्ट को टेढ़ा दिखाता है, लेकिन यह italic से थोड़ा अलग होता है; और कुछ ब्राउज़र्स में इसका support कम होता है।

Syntax

selector {
  font-style: value;
}

4. line-height क्या है?

line-height टेक्स्ट की एक लाइन से दूसरी लाइन के बीच की vertical spacing नियंत्रित करती है। Paragraphs में सही line-height रखने से readability बेहतर होती है।

p {
  line-height: 1.6;
}

Responsive websites में unitless value जैसे 1.5 या 1.6 अक्सर उपयोगी रहती है।

5. font-weight क्या है?

इससे टेक्स्ट को bold या हल्का बनाया जाता है।

p {
  font-weight: bold;  /* या numeric value: 100 to 900 */
}
  

6. font-variant क्या है?

यह small-caps टेक्स्ट दिखाने के लिए काम आती है।

p {
  font-variant: small-caps;
}
  

CSS से जुड़े अन्य जरूरी लेख

अगर आप CSS को step-by-step सीख रहे हैं, तो नीचे दिए गए related articles भी पढ़ सकते हैं:

• CSS Add करने के 3 तरीके
• CSS Selector क्या है और इसका use कैसे किया जाता है?
• CSS Background Property और value को कहाँ और कैसे use किया जाता है?
• CSS Color property को कैसे use किया जाता है?
• CSS Border Property का प्रयोग कैसे करें
• CSS Margin property और Values कहाँ और कैसे use करें
• CSS Padding सीखें हिन्दी में-Learn Padding Property in Hindi
• CSS Outline Property का Use कैसे करें
• CSS Height and Width Property की पूरी जानकारी हिन्दी में
• CSS Text Property क्या है? What is CSS Text Property?

7. font shorthand property

एक ही लाइन में सारे font properties सेट करने के लिए shorthand का इस्तेमाल करें।

p {
  font: italic bold 16px/1.5 "Times New Roman", serif;
}
  

फॉर्मेट: font-style font-weight font-size/line-height font-family

8. Font के लिए Best Practices

• Web-safe fonts का प्रयोग करें (Arial, Verdana, etc.)
• Fallback font-family हमेशा दें
• Responsive design के लिए font-size में em या rem का प्रयोग करें

निष्कर्ष

इस लेख में आपने CSS Font Property के सभी जरूरी हिस्सों को जाना – जैसे font-family, font-size, font-weight आदि। अब आप किसी भी वेबपेज का टेक्स्ट खूबसूरती से स्टाइल कर सकते हैं।