CSS Bold: Font-Weight प्रॉपर्टी का उपयोग करने की पूरी गाइड

CSS में बोल्ड टेक्स्ट इफेक्ट बनाने के लिए आपको font-weight प्रॉपर्टी का उपयोग करना होगा। font-weight प्रॉपर्टी फॉन्ट के "वेट" को निर्धारित करती है, यानी वह फॉन्ट कितना बोल्ड दिखाई देगा। आप CSS को यह निर्देश देने के लिए कीवर्ड या न्यूमेरिक मानों का उपयोग कर सकते हैं कि टेक्स्ट का एक टुकड़ा कितना बोल्ड होना चाहिए।

CSS Bold: एक परिचय

डेवलपर्स के रूप में, वेबसाइट लेआउट करते समय कभी-कभी हम किसी चीज़ की ओर ध्यान आकर्षित करना चाहते हैं। ऐसा करने के कई तरीके हैं। सबसे बुनियादी तरीका है उस टेक्स्ट का font-weight बढ़ाना जिसे आप हाइलाइट करना चाहते हैं। इसका तात्पर्य टेक्स्ट को बोल्ड (मोटा) दिखाना है।

इस लेख में हम font-weight के बारे में बात करेंगे, इसे कैसे सेट करें और प्रॉपर्टी के लिए विभिन्न संभावित मानों का उदाहरण देंगे।

CSS Font-Weight प्रॉपर्टी

font-weight प्रॉपर्टी सेट करती है कि स्क्रीन पर टेक्स्ट कितना बोल्ड दिखाई देना चाहिए। आप CSS को यह निर्देश देने के लिए कीवर्ड या न्यूमेरिक मान का उपयोग कर सकते हैं कि टेक्स्ट का एक विशेष समूह कितना बोल्ड दिखाई देना चाहिए।

CSS font-weight प्रॉपर्टी का सिंटैक्स इस प्रकार है:

font-weight: weightOfFont;

weightOfFont का मान उस फॉन्ट का वेट है जिसे आप उस एलिमेंट के लिए उपयोग करना चाहते हैं जिस पर स्टाइल लागू की गई है।

font-weight प्रॉपर्टी कुछ अलग मान स्वीकार करती है, यह इस बात पर निर्भर करता है कि आप किसी विशेष एलिमेंट के लिए कौन सा फॉन्ट-वेट सेट करना चाहते हैं।

CSS बोल्ड स्केल

अपने फॉन्ट-फैमिली को बोल्डनेस स्केल पर 100-1000 की रेंज में मानें। संख्या जितनी अधिक होगी, फॉन्ट उतना ही बोल्ड होगा।

अपने पसंदीदा फॉन्ट-फैमिली पर कुछ शोध करें। इससे आप सुनिश्चित कर सकेंगे कि परिणाम आपकी साइट पर उतना ही हल्का या बोल्ड होगा जितना आप चाहेंगे। कुछ फॉन्ट-फैमिली पूरे स्केल का उपयोग नहीं करतीं।

निम्न कोड दर्शाता है कि 'Arial' नामक एक लोकप्रिय फॉन्ट संख्या और कीवर्ड दोनों का उपयोग करके कितना हल्का और कितना गहरा हो सकता है:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>repl.it</title> <style> body { font-family: 'Arial'; font-size: 3rem; } span { font-size: 1.5rem; } p:nth-child(1) { font-weight: normal; } p:nth-child(2) { font-weight: bold; } p:nth-child(3) span { font-weight: bolder; } p:nth-child(4) span { font-weight: lighter; } p:nth-child(5) { font-weight: 100; } p:nth-child(6) { font-weight: 200; } p:nth-child(7) { font-weight: 300; } p:nth-child(8) { font-weight: 400; } p:nth-child(9) { font-weight: 500; } p:nth-child(10) { font-weight: 600; } p:nth-child(11) { font-weight: 700; } p:nth-child(12) { font-weight: 800; } p:nth-child(13) { font-weight: 900; } </style> </head> <body> <p>Hello World! <span>-- Normal</span></p> <p>Hello World! <span>-- Bold</span></p> <p>Hello World! <span>-- Bolder <br> &nbsp; &nbsp; &nbsp; &nbsp; -- child is bolder than parent </span></p> <p>Hello World! <span>-- Lighter <br> &nbsp; &nbsp; &nbsp; &nbsp; -- child is lighter than parent </span> </p> <p>Hello World! <span>-- 100</span></p> <p>Hello World! <span>-- 200</span></p> <p>Hello World! <span>-- 300</span></p> <p>Hello World! <span>-- 400 'normal'</span></p> <p>Hello World! <span>-- 500</span></p> <p>Hello World! <span>-- 600</span></p> <p>Hello World! <span>-- 700 'bold'</span></p> <p>Hello World! <span>-- 800</span></p> <p>Hello World! <span>-- 900</span></p> </body> </html>

Lighter और Bolder: इनका वास्तव में क्या अर्थ है?

यहां मुख्य बात यह है कि lighter और bolder शाब्दिक अनुवाद नहीं हैं। यहां bolder का अर्थ "bold से अधिक बोल्ड" नहीं है।

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

रिलेटिव फॉन्ट-वेट इस प्रकार हैं:

इसलिए, हम font-weight: bold प्रॉपर्टी का उपयोग करके पैराग्राफ के टेक्स्ट का फॉन्ट-वेट 800 पर सेट कर सकते हैं। जब कोई चाइल्ड अपने पैरेंट से एक रिलेटिव वेट बोल्डर होता है, तो यह ऊपर दी गई टेबल का उपयोग करके यह पता लगाता है कि इसे कितना बोल्ड बनाना है।

उदाहरण के लिए, मान लीजिए मेरे पास एक चाइल्ड है जिसका पैरेंट 400 फॉन्ट-वेट का है। यदि मैं चाइल्ड पर font-weight का मान bolder सेट करता हूं, तो चाइल्ड का फॉन्ट-वेट 700 हो जाता है।

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

CSS Font Weight उदाहरण

मान लीजिए हम The Seattle Stamp Club के लिए एक वेबसाइट डिजाइन कर रहे हैं, जो एक स्थानीय स्टैम्प सोसाइटी है। स्टैम्प सोसाइटी ने हमें उनकी वेबसाइट के About पेज पर About Us हेडिंग को बोल्ड में दिखाने के लिए कहा है। यह विज़िटर का ध्यान हेडिंग की ओर आकर्षित करेगा।

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

हम इस टेक्स्ट ब्लॉक को बनाने के लिए निम्न कोड का उपयोग कर सकते हैं, जिसमें कुछ वाक्यांश बोल्ड हैं:

<html> <p>The Seattle Stamp Club, established in 2009, is a community that encourages and promotes the collection of stamps. The Club <span>welcomes all</span>, from beginners to experts, and hosts monthly meetings where members can show each other their stamps, discuss the latest news in stamps, and bond over their shared interests. Right now, the club has <span>250 members</span>.</p> <style> span { font-weight: bolder; }

उपरोक्त कोड एडिटर में बटन पर क्लिक करके हमारे HTML/CSS कोड का आउटपुट देखें।

हमारी HTML फाइल में, हमने <p> टैग्स के भीतर संलग्न एक पैराग्राफ टेक्स्ट परिभाषित किया है। हमने कुछ वाक्यांशों को <span> टैग्स के भीतर भी संलग्न किया है, जिन्हें हम अपने CSS कोड में बोल्ड करेंगे।

इसके बाद, हमारी CSS फाइल में, हमने एक स्टाइल नियम परिभाषित किया जो हर <span> टैग के फॉन्ट स्टाइल वेट को bolder पर सेट करता है। इसका मतलब है कि किसी भी <span> टैग के भीतर संलग्न टेक्स्ट पैरेंट एलिमेंट की तुलना में बोल्ड दिखाई देगा।

जब हम अपना कोड चलाते हैं, तो हमारा पैराग्राफ सामान्य फॉन्ट-वेट के साथ दिखाई देता है, और <span> टैग्स के भीतर संलग्न वाक्यांश बोल्ड में दिखाई देते हैं। इस उदाहरण में, welcomes all और 250 members वाक्यांश <span> टैग्स में संलग्न हैं।

वेरिएबल फॉन्ट्स के साथ बोल्ड टेक्स्ट CSS

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

निष्कर्ष

इस ट्यूटोरियल में, हमने CSS font-weight प्रॉपर्टी और यह कैसे प्रभावित करती है कि हमारे फॉन्ट कितने बोल्ड हैं, इस पर चर्चा की।

हमने सीखा कि bolder और lighter का अर्थ पैरेंट एलिमेंट के फॉन्ट-वेट से एक रिलेटिव फॉन्ट-वेट दूर है। व्यवहार में, हमने फॉन्ट-वेट की एक रेंज देखी कि टेक्स्ट कैसा दिखता है। आप font-weight के साथ फॉन्ट्स को स्टाइल करने में जल्द ही एक प्रो बन जाएंगे!

CSS में कोडिंग के बारे में अधिक जानने के लिए, how to learn CSS पर हमारी गाइड पढ़ें। यदि आप CSS पर भरोसा किए बिना अपने टेक्स्ट को बोल्ड बनाना चाहते हैं तो HTML में बोल्ड टेक्स्ट कैसे बनाएं पर हमारी गाइड पढ़ सकते हैं।