वेब डेवलपमेंट में, फॉन्ट स्टाइलिंग का सही उपयोग एप्लिकेशन को एक आकर्षक रूप प्रदान करता है। ये फ़ॉन्ट शैलियाँ दस्तावेज़ के पठन क्रम के बारे में दृश्य संकेत देती हैं। उदाहरण के लिए, दस्तावेज़ शीर्षक की फ़ॉन्ट शैली बोल्ड और दूसरों से महत्वपूर्ण होनी चाहिए। स्टाइल महत्वपूर्ण सामग्री को दूसरों से अलग करने में भी मदद करता है।
इस लेख के सीखने के परिणाम हैं:
- Google वेब फ़ॉन्ट्स क्या हैं?
- HTML में Google फ़ॉन्ट्स कैसे आयात करें?
- CSS फ़ाइल में Google फ़ॉन्ट्स का उपयोग कैसे करें?
Google वेब फ़ॉन्ट्स क्या हैं?
Google वेब फ़ॉन्ट एक ओपन-सोर्स लाइब्रेरी है जिसमें सैकड़ों फ़ॉन्ट शैलियाँ या परिवार शामिल हैं। यह एपीआई भी प्रदान करता है जो हमें एंड्रॉइड और सीएसएस के साथ वेब फोंट का उपयोग करने में मदद करता है। Google फ़ॉन्ट्स अन्य फ़ॉन्ट पुस्तकालयों की तुलना में बहुत हल्का है और व्यावसायिक उपयोग के लिए निःशुल्क उपलब्ध है। इन्हें किसी भी वेबसाइट पर लागू करना आसान है।
डिफ़ॉल्ट रूप से, CSS फंतासी, सेरिफ़, संस सेरिफ़, सरसरी और मोनोस्पेस फ़ॉन्ट शैली प्रदान करता है। यदि आप कुछ अन्य फ़ॉन्ट शैलियों का उपयोग करना चाहते हैं तो Google फ़ॉन्ट्स का उपयोग किया जा सकता है।
HTML में Google फ़ॉन्ट्स कैसे आयात करें?
HTML पृष्ठ पर Google फ़ॉन्ट्स का उपयोग करने के लिए, निम्न चरणों का पालन करें।
चरण 1: फ़ॉन्ट परिवार का चयन करें
सबसे पहले, खोलें गूगल फ़ॉन्ट्स आधिकारिक वेबसाइट और अपनी पसंद का फ़ॉन्ट चुनें। उदाहरण के लिए, हमने 'चुना है' लॉबस्टर टू ' फुहारा परिवार:
चरण 2: शैलियाँ चुनें
अगला, शैलियों की सूची देखने के लिए नीचे स्क्रॉल करें। क्लिक करके उन्हें अपने संग्रह में जोड़ें ' + ' संकेत:
चरण 3: चयनित परिवारों को देखें
चयनित परिवारों को देखने के लिए, नीचे हाइलाइट किए गए आइकन पर क्लिक करें:
चरण 4: HTML में एम्बेड करने के लिए लिंक कॉपी करें
उसके बाद, नीचे स्क्रॉल करें और हाइलाइट किए गए 'फ़ॉन्ट-फ़ैमिली' का लिंक कॉपी करें प्रतिलिपि 'आइकन:
CSS फ़ाइल में Google फ़ॉन्ट्स का उपयोग कैसे करें?
स्टाइलिंग के लिए CSS में Google फ़ॉन्ट्स की प्रति का उपयोग करने के लिए, दिए गए उदाहरणों को देखें।
उदाहरण 1
एक शामिल करें ”तत्व कुछ सामग्री या पैराग्राफ निर्दिष्ट करने के लिए:
< पी > 'सर्वश्रेष्ठ ट्यूटोरियल वेबसाइट' पी >Google फ़ॉन्ट्स आयात करने के लिए, कॉपी किए गए कोड को “ <शैली> 'HTML फ़ाइल का टैग:
@ यूआरएल आयात करें ( 'https://fonts.googleapis.com/css2?family=Lobster+Two:ital@1&display=swap' ) ;शैली 'पी' तत्व
पी {फुहारा परिवार: 'लॉबस्टर टू' , घसीट;
पाठ-संरेखण: केंद्र;
फ़ॉन्ट-आकार: 45 पीएक्स;
रंग: आरजीबीए ( 64 , 3 , 162 , 0.8 ) ;
}
निम्नलिखित समझाया सीएसएस गुण HTML पर लागू होते हैं ' ' टैग:
- ' फुहारा परिवार 'मान के साथ असाइन किया गया है' 'लॉबस्टर टू', कर्सिव ”। यह फ़ॉन्ट परिवार Google फ़ॉन्ट्स से आयात किया गया है।
- ' पाठ संरेखित ” पाठ संरेखण को समायोजित करता है।
- ' फ़ॉन्ट आकार 'फ़ॉन्ट आकार निर्धारित करता है।
- ' रंग 'फ़ॉन्ट रंग सेट करता है।
छवि दिखाती है कि फ़ॉन्ट परिवार सफलतापूर्वक लागू किया गया है:
उदाहरण 2
आइए 'आयात करने के लिए एक और उदाहरण लें' नार्को वन “गूगल फॉन्ट। इस प्रयोजन के लिए, “Nerko One” Google फॉन्ट URL के लिए कोड को फिर से “Nerko One” में पेस्ट करें। <शैली> ' तत्व:
@ यूआरएल आयात करें ( 'https://fonts.googleapis.com/css2?family=Nerko+One&family=Oswald:wght@500&family=Pacifico&display=swap' ) ;शैली 'पी' तत्व
पी {फुहारा परिवार: 'नेरको वन' , घसीट;
फ़ॉन्ट वजन: 300 ;
फ़ॉन्ट-आकार: 30 पीएक्स;
}
' फुहारा परिवार ”, “ फ़ॉन्ट वजन ', और ' फ़ॉन्ट आकार 'गुण HTML पर लागू होते हैं' ' तत्व।
उत्पादन
हमने आपको सिखाया है कि CSS फ़ाइल में Google वेब फ़ॉन्ट कैसे इम्पोर्ट करें।
निष्कर्ष
CSS में Google फ़ॉन्ट्स आयात करने के लिए, सबसे पहले इस पर जाएँ गूगल फ़ॉन्ट्स आधिकारिक वेबसाइट और फ़ॉन्ट शैली का चयन करें। फिर, उस कोड को कॉपी करें जिसमें ' @आयात करना 'कीवर्ड और इसे सीएसएस फ़ाइल में या' में पेस्ट करें <शैली> ” HTML फ़ाइल का तत्व। इस अध्ययन ने Google फ़ॉन्ट्स को CSS फ़ाइल में आयात करने की पूरी प्रक्रिया का प्रदर्शन किया है।