CSS `font-family` नियम आपको HTML वेब दस्तावेज़ का फ़ॉन्ट परिभाषित करने देता है। बाहरी फ़ॉन्ट को संदर्भित करने के लिए, आप `url()` विधि का उपयोग करके फ़ॉन्ट फेस परिभाषित कर सकते हैं। या, आप Google Fonts जैसी साइट से फ़ॉन्ट CSS फ़ाइल एम्बेड कर सकते हैं।
डेवलपर्स के रूप में, एक समय आएगा जब हम उस डिफ़ॉल्ट फ़ॉन्ट का उपयोग नहीं करना चाहेंगे जो हमारे HTML के प्रोसेस होने पर पॉप्युलेट होता है। यह लेख आपको सर्वोत्तम प्रथाओं का उपयोग करके अपने HTML दस्तावेज़ में फ़ॉन्ट बदलने का तरीका दिखाने का लक्ष्य रखता है।
HTML में फ़ॉन्ट कैसे बदलें
HTML में वेब पेज का फ़ॉन्ट बदलने के तीन तरीके हैं:
- बिल्ट-इन फ़ॉन्ट के साथ `font-family` नियम का उपयोग करना।
- बाहरी फ़ॉन्ट को संदर्भित करने के लिए `font-face` नियम का उपयोग करना।
- वेब पेज पर फ़ॉन्ट स्टाइल करने के लिए बाहरी CSS स्टाइलशीट का उपयोग करना।
इस लेख में, हम फ़ॉन्ट बदलने की इन प्रत्येक विधि के बारे में बात करेंगे।
HTML फ़ॉन्ट बदलें: बिल्ट-इन Font-Family
पहला तरीका जिससे हम अपना फ़ॉन्ट बदल सकते हैं, वह है हमारे इंलाइन स्टाइलिंग में `font-family` प्रॉपर्टी का उपयोग करना। यह इस तरह किया जा सकता है:
<p style="font-family:wingdings;" id="wingdings">New York</p>
हम बस यह इंगित करने के लिए `font-family` प्रॉपर्टी का उपयोग करते हैं कि हम अपने टेक्स्ट ब्लॉक में किस फ़ॉन्ट का उपयोग करना चाहते हैं। कई मानक फ़ॉन्ट आसानी से उपयोग के लिए उपलब्ध हैं।
बैकअप फ़ॉन्ट रखना एक अच्छा विचार है, बस अगर पहली फ़ॉन्ट पसंद लोड नहीं हो सकती। यह कॉमा और नए फ़ॉन्ट-फैमिली नाम को जोड़ने जितना आसान है। मैं हमेशा उस एक एज केस के लिए अंत में एक जेनेरिक ग्रुपिंग के साथ समाप्त करता हूँ जहां पहले दो उपलब्ध नहीं हैं।
<p style="font-family: Roboto, Lato, sans-serif" id="roboto-plus-backups">New York</p>
अंत में जेनेरिक ग्रुपिंग केवल उस डिवाइस के लिए डिफ़ॉल्ट sans-serif फ़ॉन्ट है जिसका क्लाइंट उपयोग कर रहा है। हमारे लिए उपलब्ध जेनेरिक फैमिली नाम: monospace, serif, sans-serif, cursive, और fantasy। आप Times New Roman जैसे कुछ विशिष्ट फ़ॉन्ट भी एक्सेस कर सकते हैं।
HTML फ़ॉन्ट बदलें: Font-Face का उपयोग करना
आप अपने वेब पेज पर बाहरी स्रोत से फ़ॉन्ट आयात करने के लिए `font-face` नियम का उपयोग कर सकते हैं।
इस दृष्टिकोण का उपयोग करने के लिए, आपके पास बाहरी फ़ॉन्ट दस्तावेज़ तक पहुंच होनी चाहिए। फ़ॉन्ट दस्तावेज़ में आमतौर पर एक्सटेंशन ".ttf" होता है।
आइए देखें कि `font-face` एट्रिब्यूट का उपयोग करके फ़ॉन्ट कैसे बदलें। यहाँ हमें जिस CSS स्टाइल नियम का उपयोग करने की आवश्यकता है:
@font-face { font-family: "Open Sans"; src: url(yoururl); }
हम अपने नए फ़ॉन्ट की घोषणा करने के लिए `font-face` स्टाइल एट्रिब्यूट का उपयोग करते हैं। `font-family` एट्रिब्यूट हमारे नए फ़ॉन्ट का नाम परिभाषित करता है। `src: url()` हमारे CSS दस्तावेज़ को निर्देश देता है कि हमारा फ़ॉन्ट कहां मिलेगा। "yoururl" का मान आपके टेक्स्ट फ़ॉन्ट का URL होना चाहिए।
हमारा फ़ॉन्ट अभी तक हमारे वेब पेज को नहीं बदलेगा। हमें अपने CSS स्टाइलशीट को बताना होगा कि किन एलिमेंट को हमारे नए फ़ॉन्ट का उपयोग करना चाहिए:
h1, h2, h3 { font-family: "Open Sans"; }
यह कोड हमारी CSS स्टाइलशीट को हमारे वेब पेज पर कुछ एलिमेंट पर "Open Sans" फ़ॉन्ट लागू करने के लिए कहता है। h1, h2, h3 एक CSS सेलेक्टर है जो सूचीबद्ध एलिमेंट पर हमारी स्टाइल लागू करता है। ये एलिमेंट HTML हेडिंग हैं।
HTML फ़ॉन्ट बदलें: बाहरी CSS फ़ॉन्ट
Google Fonts जैसी कुछ साइटें आपको CSS स्टाइलशीट का उपयोग करके अपनी साइट पर फ़ॉन्ट एम्बेड करने देती हैं। ये स्टाइल आपको CSS एट्रिब्यूट का उपयोग करके फ़ॉन्ट प्रकार परिभाषित करने देते हैं। इस उदाहरण में, हम Google Fonts से 'Bangers' और 'Yellowtail' फ़ॉन्ट का उपयोग करने का प्रयास करेंगे:
<p id="sans-serif" style="font-family: Bangers, sans-serif" >New York</p> <p id="cursive" style="font-family: Yellowtail, cursive" >New York</p>
यदि आप अपने पसंद के IDE में उपरोक्त कोड चलाते हैं और इसे लोड करते हैं, तो यह जेनेरिक फ़ॉन्ट पर डिफ़ॉल्ट होगा। यदि आप इन फ़ॉन्ट का उपयोग करना चाहते हैं, तो आप कुछ सरल क्लिक के साथ ऐसा कर सकते हैं:
- Google Fonts पर जाएं।
- यदि आप चाहें तो साइट के साथ खेलने के लिए समय लें। यहां फ़ॉन्ट के लिए बहुत सारे विकल्प हैं। आप नमूना टेक्स्ट को जो चाहें अनुकूलित कर सकते हैं। वेब पेज के शीर्ष पर एक इनपुट है जिसमें आप जो चाहें दर्ज कर सकते हैं।
- 'Yellowtail' खोजें और उस पर क्लिक करें। आपको फ़ॉन्ट के बारे में विस्तृत जानकारी वाली स्क्रीन पर आना चाहिए। "+ Select This Style" बटन देखें और उस पर क्लिक करें।
- एक साइडबार ड्रॉअर आपकी चयन के बारे में जानकारी के साथ पॉप आउट होना चाहिए। जब आप अधिक फ़ॉन्ट ब्राउज़ करते हैं तो यह खुला रहेगा। स्क्रीन के शीर्ष पर Browse Fonts लिंक पर क्लिक करें और 'Bangers' खोजें। 'Yellowtail' के लिए जैसा आपने किया था उसी प्रक्रिया से गुजरें।
- साइडबार पर, आपको 'Embed' के लिए एक टैब दिखाई देगा। उस पर क्लिक करें।
- <link> विकल्प पहले से ही हाइलाइट होना चाहिए। `` को अपने HTML के हेड में कॉपी और पेस्ट करें।
- CSS में प्रत्येक फ़ॉन्ट का उपयोग कैसे करें, इसके लिए दिए गए दिशानिर्देशों का पालन करें। वे अनुशंसित बैकअप फ़ॉन्ट भी देते हैं।
- बस! आप अपने दस्तावेज़ में इन फ़ॉन्ट का उपयोग करने के लिए तैयार हैं।
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>repl.it</title> <link href="style.css" rel="stylesheet" type="text/css" /> <link href="https://fonts.googleapis.com/css2?family=Bangers&family=Yellowtail&display=swap" rel="stylesheet"> </head> <body> <p id="courier">New York</p> <p id="roboto">New York</p> <p id="raleway" style="font-family: Raleway, sans-serif">New York</p> <p id="serif" style="font-family: Courier New">New York</p> <p id="monospace" style="font-family: Roboto Monospace, monospace">New York</p> <p id="sans-serif" style="font-family: Bangers, Anton, sans-serif" >New York</p> <p id="cursive" style="font-family: Yellowtail, cursive" >New York</p> <p id="roboto-condensed" style="font-family: Roboto Condensed, sans-serif">New York</p> </body> </html>
ऊपर दिया गया वर्किंग डेमो बिल्ट-इन और थर्ड-पार्टी दोनों फ़ॉन्ट के उपयोग को दर्शाता है। अन्य फ़ॉन्ट आयात करने में अपना हाथ आजमाएं!
निष्कर्ष
आप `font-family` एट्रिब्यूट का उपयोग करके या कस्टम फ़ॉन्ट के साथ बाहरी CSS स्टाइलशीट का उपयोग करके HTML फ़ॉन्ट बदल सकते हैं। अपनी साइट के CSS में कस्टम फ़ॉन्ट एम्बेड करने के लिए, आप `font-face` नियम का उपयोग कर सकते हैं।
क्या आप HTML में कोडिंग के बारे में अधिक जानना चाहते हैं? HTML सीखने का हमारा गाइड पढ़ें। इस गाइड में आपको HTML सीखने के लिए शीर्ष युक्तियाँ और सर्वोत्तम ऑनलाइन पाठ्यक्रमों पर मार्गदर्शन मिलेगा।
