CSS वेब फ़ॉन्ट
आप पहले से font-family, आकार और वज़न जानते हैं। वेब फ़ॉन्ट ऐसी लिखावट लोड करते हैं जो विज़िटर के डिवाइस पर पहले से न हो — @font-face से घोषित करें, फ़ैमिली नाम किसी और फ़ॉन्ट की तरह इस्तेमाल करें, और शांत फ़ॉलबैक से खत्म करें।
@font-face के हिस्से
📊 @font-face एक नज़र में
| हिस्सा | रोज़ का काम |
|---|---|
font-family |
वह नाम जो आप बनाते हैं और बाद में CSS में इस्तेमाल करते हैं |
src |
फ़ॉन्ट फ़ाइल(ें) कहाँ हैं (url(...) और अक्सर format(...)) |
font-weight / font-style |
यह फ़ाइल कौन सा फेस है (regular, bold, italic…) |
font-display |
फ़ॉन्ट लोड होते समय टेक्स्ट कैसे व्यवहार करे (जैसे swap) |
दो शांत कदम सोचें: @font-face से फेस रजिस्टर करें, फिर सामान्य नियमों में वही फ़ैमिली नाम कॉल करें। कोई कदम छोड़ें तो स्टैक कस्टम फ़ाइल नहीं पाता।
न्यूनतम @font-face
फेस को साफ़ नाम दें और src को अपनी साइट (या CDN) की फ़ॉन्ट फ़ाइल पर रखें।
बेसिक @font-face
css@font-face {
font-family: "Site Sans";
src: url("/fonts/site-sans.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}एक से ज़्यादा फ़ॉर्मैट दें
आधुनिक ब्राउज़र woff2 पसंद करते हैं। बाद में woff पुराने ब्राउज़र कवर करता है। सबसे अच्छा फ़ॉर्मैट पहले रखें।
पहले woff2 फिर woff
css@font-face {
font-family: "Site Sans";
src:
url("/fonts/site-sans.woff2") format("woff2"),
url("/fonts/site-sans.woff") format("woff");
font-weight: 400;
font-style: normal;
}font-display — टेक्स्ट जल्दी दिखाएँ
font-display: swap ब्राउज़र को पहले फ़ॉलबैक टेक्स्ट दिखाने देता है, फिर वेब फ़ॉन्ट आने पर बदलता है — लंबे अदृश्य गैप से अक्सर बेहतर।
Display swap
css@font-face {
font-family: "Site Sans";
src: url("/fonts/site-sans.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}घोषित फ़ैमिली इस्तेमाल करें
@font-face के बाद नियमों में वही font-family नाम कॉल करें — और एक सामान्य फ़ॉलबैक रखें।
कस्टम फ़ैमिली लागू करें
cssbody {
font-family: "Site Sans", system-ui, "Segoe UI", sans-serif;
font-size: 1rem;
line-height: 1.6;
}शांत सेल्फ-होस्ट आदत
सिर्फ ज़रूरी वज़न होस्ट करें, woff2 पसंद करें, font-display सेट करें, और हमेशा सिस्टम/जेनेरिक स्टैक रखें।
लोडेड बोल्ड फेस वाला शीर्षक
css@font-face {
font-family: "Site Sans";
src: url("/fonts/site-sans-bold.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}
h1 {
font-family: "Site Sans", Georgia, serif;
font-weight: 700;
}खुद आज़माएँ
- कस्टम
font-familyनाम औरwoff2srcवाला@font-faceब्लॉक लिखें। woffके लिए दूसरीsrcलाइन जोड़ें।font-display: swapसेट करें।bodyपर"Your Name", sans-serifलागू करें।- अगर बोल्ड फ़ाइल है, वज़न
700के लिए अलग@font-faceजोड़ें — फिर शीर्षक परfont-weight: 700।
आम गलतियाँ
@font-faceघोषित करना परfont-familyमें वही नाम कभी न इस्तेमाल करना- फ़ॉलबैक स्टैक छोड़ना (फ़ाइल फेल हो तो टूट जाता है)
- बहुत सारे बेकार वज़न और स्टाइल लोड करना (धीमे पेज)
font-displayरणनीति के बिना लंबे समय टेक्स्ट अदृश्य रखना- इस पाठ को text-shadow / प्रभावों से मिलाना (अगले पाठ में)
सारांश
@font-faceकस्टम फ़ैमिली नाम रजिस्टर करता है और फ़ॉन्ट फ़ाइलों की ओर इशारा करता हैwoff2पसंद करें, वैकल्पिक रूप सेwoffबैकअपfont-display: swapअक्सर लोड के दौरान टेक्स्ट पठनीय रखता है- CSS में वही फ़ैमिली नाम सिस्टम/जेनेरिक फ़ॉलबैक के साथ इस्तेमाल करें
- सिर्फ ज़रूरी फेस लोड करें; text-shadow जैसे प्रभाव बाद का पाठ हैं
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी