CSS फ़ॉन्ट-पारिवारिक संपत्ति के साथ अपनी वेबसाइट का टेक्स्ट कैसे बदलें

आप वेब पेज पर विभिन्न शैलियों की एक श्रृंखला प्राप्त करने के लिए सीएसएस का उपयोग कर सकते हैं; यदि आप अपने टेक्स्ट का रंग बदलना चाहते हैं, तो उसके लिए एक CSS गुण है। और यदि आप अपने वेब पेज पर टेक्स्ट की स्थिति बदलना चाहते हैं—या आपकी साइट पर प्रदर्शित टेक्स्ट का प्रकार— तो आप कर सकते हैं।

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

वेबसाइट पर टेक्स्ट का उद्देश्य क्या है?

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

यदि उपयोगकर्ता किसी वेबसाइट पर जानकारी नहीं पढ़ सकते हैं, तो हो सकता है कि वे यह नहीं जानते कि साइट किस बारे में है—या इसका उपयोग कैसे करना है। इसलिए, सही फ़ॉन्ट प्रकार चुनना महत्वपूर्ण है।

फ़ॉन्ट-पारिवारिक संपत्ति क्या है?

फ़ॉन्ट-फ़ैमिली एक सीएसएस संपत्ति है जिसका उपयोग किसी वेबसाइट पर फ़ॉन्ट प्रकार सेट करने के लिए किया जाता है। इस गुण को आम तौर पर एक मान दिया जाता है जिसमें "फ़ॉलबैक सिस्टम" के रूप में डिज़ाइन किए गए कई फ़ॉन्ट नाम होते हैं। "फ़ॉलबैक सिस्टम" आपकी वेबसाइट और आपकी साइट पर आने वाले विज़िटर द्वारा उपयोग किए जा सकने वाले विभिन्न प्रकार के ब्राउज़रों के बीच संगतता सुनिश्चित करता है।

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

फ़ॉन्ट-परिवार सिंटैक्स उदाहरण

 
selector{
font-family: firstFontType, 'second font type', genericFontType;
}

ऊपर दिए गए उदाहरण में चयनकर्ता एक आईडी, एक वर्ग या एक HTML तत्व हो सकता है। आम तौर पर, चयनकर्ता बॉडी एलिमेंट होता है, जो यह सुनिश्चित करता है कि किसी दिए गए वेब पेज पर हर दुनिया एक ही फॉन्ट परिवार से संबंधित हो।

फ़ॉन्ट-फ़ैमिली प्रॉपर्टी को आम तौर पर एक स्टैक मान असाइन किया जाता है जिसमें कई विकल्प होते हैं। ऊपर दिए गए उदाहरण में तीन विकल्प हैं, लेकिन आपके पास और भी विकल्प हो सकते हैं। फ़ॉलबैक सिस्टम का उपयोग करते हुए, ब्राउज़र यह जांच करेगा कि उसकी स्थानीय फ़ाइलों में पहला फ़ॉन्ट प्रकार उपलब्ध है या नहीं। यदि ऐसा नहीं है, तो ब्राउज़र जांच करेगा कि दूसरा फ़ॉन्ट प्रकार उपलब्ध है या नहीं।

ऊपर के उदाहरण में सामान्य फ़ॉन्ट प्रकार, फ़ॉन्ट परिवार है जो स्टैक में पिछले फ़ॉन्ट प्रकार से संबंधित है। इसलिए, यदि कोई ब्राउज़र किसी भी पसंदीदा फ़ॉन्ट प्रकार को प्रदर्शित नहीं कर सकता है, तो वह अपनी स्थानीय फ़ाइलों से उसी फ़ॉन्ट परिवार में एक फ़ॉन्ट प्रकार का चयन करेगा।

नीचे विभिन्न फ़ॉन्ट प्रकार दिए गए हैं जिनका आप उपयोग कर सकते हैं:

  • सेरिफ़
  • सान्स सेरिफ़
  • कर्सिव
  • कल्पना
  • एकलस्पेस

कार्रवाई में फ़ॉन्ट-पारिवारिक संपत्ति के उदाहरण

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

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

ऊपर की छवि में टेक्स्ट को बदलने के लिए, आपको बॉडी एलिमेंट का उपयोग करना होगा, जो वेब पेज पर सभी टेक्स्ट को लक्षित करता है।

फ़ॉन्ट-पारिवारिक संपत्ति का मुख्य भाग टेक्स्ट पर उपयोग करना

 
body{
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

ऊपर दिया गया कोड एक वेब पेज पर फ़ॉन्ट परिवार को फ्रैंकलिन गोथिक माध्यम पर सेट करता है; यदि वह फ़ॉन्ट ब्राउज़र की स्थानीय फ़ाइल में उपलब्ध नहीं है, तो वह एरियल नैरो फ़ॉन्ट पर चला जाएगा। स्टैक में अंतिम फ़ॉन्ट प्रकार एरियल है , और यदि यह अनुपलब्ध भी है, तो ब्राउज़र सामान्य फ़ॉन्ट परिवार से उपलब्ध फ़ॉन्ट प्रकार का चयन करेगा: sans-serif

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

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

इस खंड की शुरुआत में उल्लिखित कोड ब्राउज़र में निम्नलिखित आउटपुट देगा।

फ्रैंकलिन गोथिक माध्यम और डिफ़ॉल्ट टाइम्स न्यू रोमन फ़ॉन्ट प्रकार के बीच का अंतर हड़ताली है। ऐसा इसलिए है क्योंकि फ्रैंकलिन गॉथिक माध्यम सेन्स-सेरिफ़ फ़ॉन्ट परिवार से संबंधित है और टाइम्स न्यू रोमन सेरिफ़ परिवार से संबंधित है।

हालांकि यह एक बहुत ही सामान्य प्रथा नहीं है, कुछ वेबसाइटों के एक ही वेब पेज पर विभिन्न प्रकार के फ़ॉन्ट होते हैं। उदाहरण के लिए, यदि आपका लक्ष्य अपने वेब पेज पर दो फ़ॉन्ट प्रकारों का उपयोग करना है, तो आप इसे पूरा करने के लिए किसी वर्ग या आईडी चयनकर्ता का उपयोग कर सकते हैं

ब्लॉक फ़ॉन्ट प्रकार उदाहरण: आईडी का उपयोग करना


#content-1{
font-family:'Courier New', Courier, monospace;
}

यदि आपका लक्ष्य किसी समूह में एक पैराग्राफ के टेक्स्ट को बदलना है (जैसा कि आमतौर पर ब्लॉक कोट्स के मामले में होता है), तो आप आईडी के साथ विशिष्ट पैराग्राफ को भी लक्षित कर सकते हैं। ऊपर दिया गया कोड दूसरे पैराग्राफ के फ़ॉन्ट प्रकार (एक समूह के भीतर) को डिफ़ॉल्ट टाइम्स न्यू रोमन फ़ॉन्ट प्रकार से कर्सिव फ़ॉन्ट प्रकार में बदलने के लिए एक आईडी का उपयोग करता है। आप इस कोड का प्रभाव नीचे दी गई छवि में देख सकते हैं।

शीर्षकों के लिए फ़ॉन्ट प्रकार का चयन करना उदाहरण: h1 चयनकर्ता

 
h1{
font-family: Arial, Helvetica, sans-serif;
}

उपरोक्त कोड आपके ब्राउज़र में निम्न आउटपुट देगा।

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

अब आप CSS font-family संपत्ति के साथ अपनी वेबसाइट के टेक्स्ट को बदल सकते हैं

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

इस स्तर पर सीखने के लिए एक और अच्छी सीएसएस संपत्ति टेक्स्ट-एलाइन संपत्ति है। यह संपत्ति आपको अपने टेक्स्ट को अपनी वेबसाइट पर विभिन्न स्थानों पर रखने की अनुमति देती है, जो प्रत्येक फ्रंट-एंड डेवलपर के लिए एक और आवश्यक कौशल है।