फ़ॉन्ट बदलें HTML:एक कैसे-कैसे मार्गदर्शिका

फ़ॉन्ट-फ़ैमिली CSS नियम आपको HTML वेब दस्तावेज़ के फ़ॉन्ट को परिभाषित करने देता है। बाहरी फोंट को संदर्भित करने के लिए, आप फ़ॉन्ट चेहरे को परिभाषित करने के लिए url() विधि का उपयोग कर सकते हैं। या, आप Google फ़ॉन्ट्स जैसी साइट से एक फ़ॉन्ट सीएसएस फ़ाइल एम्बेड कर सकते हैं।

डेवलपर्स के रूप में, एक समय होगा जब हम अपने HTML संसाधित होने पर पॉप्युलेट किए गए डिफ़ॉल्ट फ़ॉन्ट का उपयोग नहीं करना चाहेंगे। इस लेख का उद्देश्य आपको यह दिखाना है कि सर्वोत्तम प्रथाओं का उपयोग करके अपने HTML दस्तावेज़ में फ़ॉन्ट कैसे बदला जाए।

HTML में फ़ॉन्ट कैसे बदलें

HTML में वेब पेज का फॉन्ट बदलने के तीन तरीके हैं:

• फ़ॉन्ट-फ़ैमिली नियम के साथ एक अंतर्निहित फ़ॉन्ट का उपयोग करना।
• किसी बाहरी फ़ॉन्ट को संदर्भित करने के लिए फ़ॉन्ट-फेस नियम का उपयोग करना।
• वेब पेज पर फोंट को स्टाइल करने के लिए बाहरी सीएसएस स्टाइल शीट का उपयोग करना।

इस लेख में, हम फ़ॉन्ट बदलने के इन तरीकों में से प्रत्येक के बारे में बात करेंगे।

HTML बदलें फ़ॉन्ट:अंतर्निहित फ़ॉन्ट-परिवार

अपने इनलाइन स्टाइल में फॉन्ट-फ़ैमिली प्रॉपर्टी का उपयोग करके हम अपना फॉन्ट बदल सकते हैं। ऐसा इस तरह किया जा सकता है:

<p style="font-family:wingdings;" id="wingdings">New York</p>

हम बस फ़ॉन्ट-फ़ैमिली . का उपयोग करते हैं संपत्ति यह इंगित करने के लिए कि हम अपने टेक्स्ट के ब्लॉक में किस फ़ॉन्ट का उपयोग करना चाहते हैं। कई मानक फ़ॉन्ट उपयोग के लिए आसानी से उपलब्ध हैं।

बैकअप फ़ॉन्ट रखना एक अच्छा विचार है, बस अगर पहली फ़ॉन्ट-पसंद लोड नहीं की जा सकती है। यह अल्पविराम और नया फ़ॉन्ट-पारिवारिक नाम जोड़ने जितना आसान है। मैं हमेशा एक सामान्य समूह के साथ ही उस एक किनारे के मामले में समाप्त होता हूं कि पहले दो उपलब्ध नहीं हैं।

<p style="font-family: Roboto, Lato, sans-serif" 
id="roboto-plus-backups">New York</p>

अंत में सामान्य समूहीकरण क्लाइंट द्वारा उपयोग किए जा रहे किसी भी उपकरण के लिए केवल डिफ़ॉल्ट sans-serif फ़ॉन्ट है। सामान्य पारिवारिक नाम जो हमारे लिए उपलब्ध हैं:मोनोस्पेस , सेरिफ़ , बिना सेरिफ़ , कर्सिव , और फंतासी . आप टाइम्स न्यू रोमन जैसे कुछ विशिष्ट फ़ॉन्ट्स को भी एक्सेस कर सकते हैं।

81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।

बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।

HTML बदलें फ़ॉन्ट:फ़ॉन्ट-चेहरे का उपयोग करना

आप अपने वेब पेज पर किसी बाहरी स्रोत से फ़ॉन्ट आयात करने के लिए फ़ॉन्ट-फेस नियम का उपयोग कर सकते हैं।

इस दृष्टिकोण का उपयोग करने के लिए, आपके पास बाहरी फ़ॉन्ट दस्तावेज़ तक पहुंच होनी चाहिए। फ़ॉन्ट दस्तावेज़ों में आमतौर पर “.ttf” एक्सटेंशन होता है।

आइए एक नज़र डालते हैं कि फॉन्ट-फेस एट्रिब्यूट का उपयोग करके फॉन्ट को कैसे बदला जाए। यहाँ CSS स्टाइल नियम है जिसका हमें उपयोग करने की आवश्यकता है:

@font-face {
	font-family: "Open Sans";
	src: url(yoururl);
}

हम अपना नया फॉन्ट घोषित करने के लिए फॉन्ट-फेस स्टाइल एट्रिब्यूट का उपयोग करते हैं। फ़ॉन्ट-पारिवारिक विशेषता हमारे नए फ़ॉन्ट के नाम को परिभाषित करती है। src:url() हमारे CSS दस्तावेज़ को निर्देश देता है कि हमारा फ़ॉन्ट कहाँ खोजा जाए। “yoururl” का मान आपके टेक्स्ट फ़ॉन्ट का URL होना चाहिए।

हमारा फॉन्ट अभी हमारे वेब पेज को नहीं बदलेगा। हमें अपनी CSS स्टाइल शीट को बताना होगा कि हमारे नए फॉन्ट का उपयोग किन तत्वों को करना चाहिए:

h1, h2, h3 {
	font-family: "Open Sans";
}

यह कोड हमारे सीएसएस स्टाइल शीट को हमारे वेब पेज पर कुछ तत्वों के लिए "ओपन सेन्स" फ़ॉन्ट लागू करने के लिए कहता है। h1, h2, h3 एक CSS चयनकर्ता है जो हमारी शैली को सूचीबद्ध तत्वों पर लागू करता है। ये तत्व HTML शीर्षक हैं।

फ़ॉन्ट बदलें HTML:बाहरी CSS फ़ॉन्ट

कुछ साइटें जैसे कि Google फ़ॉन्ट्स आपको CSS स्टाइल शीट का उपयोग करके अपनी साइट पर एक फ़ॉन्ट एम्बेड करने देती हैं। ये शैलियाँ आपको CSS विशेषताओं का उपयोग करके फ़ॉन्ट प्रकारों को परिभाषित करने देती हैं। इस उदाहरण में, हम Google फ़ॉन्ट्स से 'बैंगर्स' और 'येलोटेल' फ़ॉन्ट का उपयोग करने का प्रयास करेंगे:

<p id="sans-serif" style="font-family: Bangers, sans-serif" >New York</p>
<p id="cursive" style="font-family: Yellowtail, cursive" >New York</p>

यदि आप ऊपर दिए गए कोड को अपनी पसंद के आईडीई में चलाते हैं और इसे लोड करते हैं, तो यह सामान्य फोंट के लिए डिफ़ॉल्ट होगा। यदि आप इन फोंट का उपयोग करना चाहते हैं, तो आप कुछ साधारण क्लिकों के साथ कर सकते हैं:

1. Google फ़ॉन्ट पर जाएं.
2. यदि आप चाहें तो साइट के साथ खेलने के लिए समय निकालें। यहां फोंट के लिए बहुत सारे विकल्प हैं। आप जो चाहें उसके साथ नमूना पाठ को अनुकूलित कर सकते हैं। आप जो चाहते हैं उसे दर्ज करने के लिए वेब पेज के शीर्ष पर एक इनपुट है।
3. येलो टेल' को सर्च करें और उस पर क्लिक करें। आपको फॉन्ट के बारे में विस्तृत जानकारी के साथ स्क्रीन पर आना चाहिए। "+ इस शैली का चयन करें . खोजें ” बटन पर क्लिक करें और उस पर क्लिक करें।
4. एक साइडबार ड्रावर आपके चयन के बारे में जानकारी के साथ पॉप आउट होना चाहिए था। जब आप अधिक फ़ॉन्ट ब्राउज़ करेंगे तो यह खुला रहेगा। फ़ॉन्ट ब्राउज़ करें . क्लिक करें स्क्रीन के शीर्ष पर लिंक करें और 'बैंगर्स' खोजें। उसी प्रक्रिया से गुजरें जैसा आपने 'येलोटेल' के लिए किया था।
5. साइडबार पर, आपको 'एम्बेड' के लिए एक टैब दिखाई देगा। उस पर क्लिक करें।
6. द <लिंक> विकल्प पहले से ही हाइलाइट किया जाना चाहिए। कॉपी और पेस्ट करें अपने एचटीएमएल के शीर्ष में।
7. सीएसएस में प्रत्येक फ़ॉन्ट का उपयोग कैसे करें, इसके लिए दिए गए दिशानिर्देशों का पालन करें। वे अनुशंसित बैकअप फोंट भी देते हैं।
8. बस! आप अपने दस्तावेज़ में इन फ़ॉन्ट का उपयोग करने के लिए तैयार हैं।

<!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>

उपरोक्त कार्यशील डेमो बिल्ट-इन और थर्ड पार्टी फोंट दोनों का उपयोग किया जा रहा है। अन्य फोंट आयात करने में अपना हाथ आजमाएं!

निष्कर्ष

आप फ़ॉन्ट-पारिवारिक विशेषता का उपयोग करके या कस्टम फोंट के साथ बाहरी सीएसएस स्टाइल शीट का उपयोग करके एक HTML फ़ॉन्ट बदल सकते हैं। अपनी साइट के सीएसएस में एक कस्टम फ़ॉन्ट एम्बेड करने के लिए, आप फ़ॉन्ट-फेस नियम का उपयोग कर सकते हैं।

क्या आप HTML में कोडिंग के बारे में अधिक जानना चाहते हैं? हमारा HTML कैसे सीखें गाइड पढ़ें। इस गाइड में आपको एचटीएमएल सीखने के शीर्ष टिप्स और साथ ही सर्वोत्तम ऑनलाइन पाठ्यक्रमों पर मार्गदर्शन मिलेगा।