CSS फ़ॉन्ट्स
आप जानते हैं टेक्स्ट पंक्ति पर कैसे बैठता है। फ़ॉन्ट चुनते हैं कि आप कौन से अक्षर देखें — टाइपफ़ेस परिवार, आकार, मोटाई, और italic झुकाव। कस्टम वेब फ़ॉन्ट लोड करना अगला पाठ है; यहाँ मूल फ़ॉन्ट गुण मज़बूत करें।
एक नज़र में फ़ॉन्ट औज़ार
📊 आम फ़ॉन्ट गुण
| गुण | रोज़ का काम |
|---|---|
font-family |
टाइपफ़ेस स्टैक नाम देता है (प्लस सामान्य fallback) |
font-size |
टेक्स्ट कितना बड़ा है सेट करता है |
font-weight |
कितना बोल्ड है सेट करता है (जैसे 400, 700, bold) |
font-style |
normal या italic (और संबंधित स्टाइल) |
font (shorthand) |
स्टाइल, वजन, आकार और परिवार एक घोषणा में जोड़ता है |
Font-family स्टैक
पहले पसंदीदा फ़ॉन्ट लिखें, फिर सुरक्षित विकल्प, और अंत में सामान्य परिवार जैसे sans-serif या serif ताकि हमेशा कुछ रेंडर हो।
पठनीय sans-serif स्टैक
cssbody {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}फ़ॉन्ट आकार
font-size टेक्स्ट का आकार सेट करता है। rem जैसी सापेक्ष इकाइयाँ अक्सर पृष्ठ के साथ शांत स्केल करती हैं; px और large जैसे कीवर्ड भी काम करते हैं।
शीर्षक और बॉडी आकार
cssh1 {
font-size: 2rem;
}
p {
font-size: 1rem;
}फ़ॉन्ट वजन
font-weight बोल्डनेस नियंत्रित करता है। संख्यात्मक वजन (400, 700) या कीवर्ड (normal, bold) आम हैं। फ़ेस को आपके माँगे वजन का समर्थन करना चाहिए।
वजन से ज़ोर
css.lead {
font-weight: 700;
}
.caption {
font-weight: 400;
}फ़ॉन्ट स्टाइल — italic
font-style: italic टेक्स्ट झुकाता है जब italic फ़ेस उपलब्ध हो। उद्धरण या नरम ज़ोर के लिए; हर पैराग्राफ के लिए नहीं।
इटैलिक उद्धरण
cssblockquote {
font-style: italic;
font-family: Georgia, "Times New Roman", serif;
}Font shorthand
font shorthand स्टाइल, वजन, आकार और परिवार साथ सेट कर सकता है। अधिकांश ब्राउज़र जिस रूप की अपेक्षा रखते हैं उसमें आकार और परिवार आवश्यक हैं।
कार्ड शीर्षक पर font shorthand
css.card-title {
font: italic 700 1.25rem Georgia, "Times New Roman", serif;
}बॉडी के लिए शांत आदत
पेज के लिए एक स्पष्ट स्टैक, शीर्षकों के लिए थोड़ा मज़बूत वजन या आकार, और पढ़ने में आसान बॉडी टेक्स्ट।
पेज फ़ॉन्ट आधार
cssbody {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.6;
}
h2 {
font-family: Georgia, "Times New Roman", serif;
font-size: 1.5rem;
font-weight: 700;
}खुद आज़माएँ
bodyकोsans-serifपर खत्म होने वाला sans-serif स्टैक दें।h1को बड़ाfont-sizeऔरfont-weight: 700दें।blockquoteकोfont-style: italicऔर serif स्टैक से स्टाइल करें।- किसी शीर्षक को
fontshorthand से फिर लिखें। - उसी पैराग्राफ को serif बनाम sans-serif में तुलना करें — मूड बदलता दिखेगा।
आम गलतियाँ
- एक फैंसी नाम बिना fallback (फ़ेस न हो तो रूप टूटता है)
- हर जगह विशाल स्थिर
pxबिना सापेक्ष सोच font-weight: 900माँगना जब फ़ेस सिर्फ regular और bold दे- यहाँ
@font-face/ होस्टेड वेब फ़ॉन्ट पर कूदना (अगला पाठ) - text-align या text-decoration इस्तेमाल जब मतलब font-family या font-weight था
सार
font-familyस्टैक लिखता है और सामान्य परिवार पर खत्म होना चाहिएfont-sizeआकार सेट करता है; सापेक्ष इकाइयाँ अक्सर शांत स्केल करती हैंfont-weightऔरfont-styleबोल्ड व इटैलिक ज़ोर देते हैंfontshorthand स्टाइल, वजन, आकार और परिवार बाँधता है- स्पष्ट बॉडी स्टैक रखें; कस्टम वेब फ़ॉन्ट लोड अगले पाठ में
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी