यह ब्लॉग CSS @font-face नियम के उपयोग के बारे में बात करेगा।
सीएसएस @ फॉन्ट-फेस नियम क्या है?
सीएसएस में @ फॉन्ट-फेस नियम का उपयोग हमारी परियोजनाओं के लिए कस्टम फोंट बनाने के लिए किया जाता है। इन फोंट को सर्वर या सिस्टम के इंस्टॉल किए गए फोंट से लोड किया जा सकता है।
सीएसएस @ फॉन्ट-फेस नियम का उपयोग कैसे करें?
CSS @font-face नियम का उपयोग करने के लिए सिंटैक्स का उल्लेख नीचे किया गया है:
@फॉन्ट फ़ेस {
फुहारा परिवार : MyNewFont ;
स्रोत : यूआरएल ( )
}
@ फॉन्ट-फेस नियम को फॉन्ट-फैमिली प्रॉपर्टी में एक मान निर्दिष्ट करके परिभाषित किया गया है और संबंधित यूआरएल जहां से यह फॉन्ट src विशेषता के रूप में स्थित है।
उदाहरण
नीचे दिए गए उदाहरण में, हम फोंट को कस्टमाइज़ करेंगे। ऐसा करने के लिए, सबसे पहले, ब्राउज़र से फ़ॉन्ट डाउनलोड करें और उन्हें अपने प्रोजेक्ट के फ़ोल्डर में जोड़ें। यदि आप सर्वर से फ़ॉन्ट का उपयोग कर रहे हैं तो आप लिंक का भी उपयोग कर सकते हैं।
सबसे पहले,
और टैग जोड़ें, फिर उनमें से प्रत्येक के लिए फोंट को अनुकूलित करने के लिए लागू करें। आइए ऊपर वर्णित परिदृश्य को तीन चरणों में लागू करें।
चरण 1: HTML फ़ाइल में तत्व जोड़ें
चरण 1: HTML फ़ाइल में तत्व जोड़ें
HTML में,
सेक्शन के अंदर, वेब पेज से संबंधित कुछ सामग्री जोड़ने के लिए और जोड़ें:
< एच 2 > लिनक्सहिंट में आपका स्वागत है! < / एच 2 >
< एच 1 > लिनक्सहिंट में आपका स्वागत है! < / एच 1 >
चरण 2: सीएसएस में @ फॉन्ट-फेस नियम निर्दिष्ट करें
< एच 2 > लिनक्सहिंट में आपका स्वागत है! < / एच 2 >
< एच 1 > लिनक्सहिंट में आपका स्वागत है! < / एच 1 >
चरण 2: सीएसएस में @ फॉन्ट-फेस नियम निर्दिष्ट करें
नियम निर्दिष्ट करने के लिए, कीवर्ड ' @फॉन्ट फ़ेस ” का उपयोग CSS में किया जाता है। इसके घुंघराले ब्रैकेट के अंदर, फ़ॉन्ट-पारिवारिक संपत्ति जोड़ें और फ़ॉन्ट नाम को इसके मूल्य के रूप में जोड़ें। फिर, डाउनलोड किए गए फ़ॉन्ट का URL पथ निर्दिष्ट करने के लिए src गुण का उपयोग करें:
@फॉन्ट फ़ेस {
फुहारा परिवार : myfont ;
स्रोत : यूआरएल ( '/फोंट/बटुफट\ Script.otf' ) ;
}
इसी तरह, हम एक और अनुकूलित फ़ॉन्ट ब्लॉक जोड़ेंगे:
@फॉन्ट फ़ेस {फुहारा परिवार : myfont2 ;
स्रोत : यूआरएल ( '/फ़ॉन्ट्स/ऑलिव_वाइन\ DEMO.otf' ) ;
}
अब, स्टाइल को
और तत्वों पर लागू करें।
शैली h2 तत्व
एच 2 {
फुहारा परिवार : myfont ;
फ़ॉन्ट आकार : 50 पीएक्स ;
}
शैली h2 तत्व
एच 2 {फुहारा परिवार : myfont ;
फ़ॉन्ट आकार : 50 पीएक्स ;
}
तत्व पर लागू गुणों को नीचे समझाया गया है:
- ' फुहारा परिवार 'मूल्य के साथ सेट है' myfont ” जिसे हमने @ फॉन्ट-फेस नियम में घोषित किया है।
- ' फ़ॉन्ट आकार ” संपत्ति फ़ॉन्ट का आकार 50px पर सेट करती है।
शैली h1 तत्व
एच 1 {
फुहारा परिवार : myfont2 ;
फ़ॉन्ट आकार : 70 पीएक्स ;
रंग : भूरा ;
}
यहां ही ' रंग ” गुण का उपयोग फ़ॉन्ट को रंगने के लिए किया जाता है।
नीचे प्रदान की गई छवि से यह देखा जा सकता है कि
और टैग नए घोषित फोंट के साथ सफलतापूर्वक स्टाइल किए गए हैं:
हमने CSS @font-face नियम का उपयोग करने की विधि प्रदान की है।
निष्कर्ष
फॉन्ट स्टाइल किसी भी एप्लिकेशन को सौंदर्य की दृष्टि से आकर्षक बनाने में महत्वपूर्ण भूमिका निभाते हैं। हमारे सिस्टम में सीमित फ़ॉन्ट शैलियाँ हैं, जबकि एक डेवलपर को अपने वेब ऐप्स में सौंदर्यीकरण जोड़ने के लिए अलग-अलग फ़ॉन्ट की आवश्यकता होती है। ऐसा करने के लिए, CSS हमें कस्टम फोंट जोड़ने के लिए @font-face नियम का उपयोग करने की अनुमति देता है। इस आलेख ने @ फॉन्ट-फेस नियम का प्रदर्शन किया है जिसके माध्यम से आप हमारे आवेदन में फ़ॉन्ट शैली को अनुकूलित कर सकते हैं।