सीएसएस बोल्ड टेक्स्ट इफेक्ट बनाने के लिए, आपको फॉन्ट-वेट प्रॉपर्टी का उपयोग करना चाहिए। फॉन्ट-वेट प्रॉपर्टी किसी फॉन्ट के "वेट" को निर्धारित करती है, या वह फॉन्ट कितना बोल्ड दिखाई देता है। टेक्स्ट का एक टुकड़ा कितना बोल्ड होना चाहिए, इस पर सीएसएस को निर्देश देने के लिए आप कीवर्ड या संख्यात्मक मानों का उपयोग कर सकते हैं।
डेवलपर्स के रूप में, किसी वेबसाइट को लेआउट करने में, कभी-कभी हम किसी चीज़ पर ध्यान आकर्षित करना चाहते हैं। हम ऐसा करने के कई तरीके हैं। सबसे बुनियादी तरीका है फ़ॉन्ट-वेट . को बढ़ाना उस पाठ का जिसे आप हाइलाइट करना चाहते हैं। इसका मतलब है कि टेक्स्ट को बोल्ड में दिखाया गया है।
इस लेख में, हम फ़ॉन्ट-वेट के बारे में बात करेंगे, इसे कैसे सेट करें और संपत्ति के लिए विभिन्न संभावित मूल्यों का एक उदाहरण दें।
सीएसएस बोल्ड:एक गाइड
फ़ॉन्ट-वेट प्रॉपर्टी सेट करती है कि स्क्रीन पर बोल्ड टेक्स्ट कैसा दिखना चाहिए। टेक्स्ट का एक विशेष सेट कितना बोल्ड दिखना चाहिए, इस पर सीएसएस को निर्देश देने के लिए आप या तो कीवर्ड या संख्यात्मक मान का उपयोग कर सकते हैं।
CSS फॉन्ट-वेट प्रॉपर्टी का सिंटैक्स इस प्रकार है:
font-weight: weightOfFont;
weightOfFont का मान उस फ़ॉन्ट का भार है जिसे आप उस तत्व के लिए उपयोग करना चाहते हैं जिस पर शैली लागू होती है।
किसी विशेष तत्व के लिए आप जिस फ़ॉन्ट-वेट को सेट करना चाहते हैं, उसके आधार पर फ़ॉन्ट-वेट प्रॉपर्टी कुछ अलग-अलग मान स्वीकार करती है।
सीएसएस बोल्ड स्केल
अपने फ़ॉन्ट-फ़ैमिली को बोल्डनेस स्केल पर 100-1000 के पैमाने के रूप में सोचें। संख्या जितनी अधिक होगी, फ़ॉन्ट उतना ही बोल्ड होगा।
81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।
बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।
अपने पसंदीदा फ़ॉन्ट-परिवार पर कुछ शोध करें। यह आपको यह सुनिश्चित करने देगा कि परिणाम उतना ही हल्का या उतना ही बोल्ड होगा जितना आप अपनी साइट पर चाहेंगे। कुछ फ़ॉन्ट-परिवार पूरे पैमाने का उपयोग नहीं करते हैं।
निम्नलिखित कोड दिखाता है कि संख्या और कीवर्ड दोनों का उपयोग करके 'एरियल' नामक एक लोकप्रिय फ़ॉन्ट कितना हल्का और कितना गहरा हो सकता है:
<!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>
-- child is bolder than parent
</span></p>
<p>Hello World! <span>-- Lighter
<br>
-- 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> लाइटर और बोल्डर:उनका वास्तव में क्या मतलब है?
मुख्य बात जिस पर यहाँ ध्यान देने की आवश्यकता है वह यह है कि हल्का और बोल्डर एक शाब्दिक अनुवाद नहीं है। यहां बोल्ड का मतलब "बोल्ड से बोल्ड" नहीं है।
बोल्डर और लाइटर का वास्तव में मतलब है, इस संदर्भ में, वे अपने मूल तत्व के संबंध में कितने बोल्ड या कितने हल्के हैं। इसलिए जब हम किसी चाइल्ड एलिमेंट को बोल्डर बनाते हैं, तो वे अपने माता-पिता की तुलना में एक सापेक्ष फ़ॉन्ट-वेट गहरा होगा - वही लाइटर के लिए जाता है।
सापेक्ष फ़ॉन्ट-वेट इस प्रकार हैं:
| सापेक्ष फ़ॉन्ट-वेट | वास्तविक फ़ॉन्ट-भार |
| पतला | 100 |
| सामान्य | 400 |
| बोल्ड | 700 |
| भारी | 900 |
इसलिए, हम टेक्स्ट के अनुच्छेद के फ़ॉन्ट-वेट को 800 पर सेट करने के लिए फ़ॉन्ट-वेट:बोल्ड प्रॉपर्टी का उपयोग कर सकते हैं। जब कोई बच्चा अपने माता-पिता की तुलना में एक सापेक्ष वजन बोल्ड होता है, तो यह उपरोक्त तालिका का उपयोग यह पता लगाने के लिए करता है कि कितना बोल्ड बनाना है यह।
उदाहरण के लिए, मान लें कि मेरे पास एक बच्चा है जिसके माता-पिता का फ़ॉन्ट-वज़न 400 है। अगर मैं बच्चे पर फ़ॉन्ट-वेट का मान बोल्डर पर सेट करता हूं, तो बच्चे पर फ़ॉन्ट-वेट 700 हो जाता है।
ऐसा इसलिए है क्योंकि बच्चा माता-पिता की तुलना में एक सापेक्ष फ़ॉन्ट-वजन गहरा है। अगर माता-पिता पहले से ही उतना ही अंधेरा या हल्का है जितना वह जा सकता है, तो वे संपत्ति मूल्य कुछ भी नहीं करेंगे।
सीएसएस फ़ॉन्ट वजन उदाहरण
मान लीजिए कि हम एक स्थानीय स्टाम्प सोसायटी, द सिएटल स्टैम्प क्लब के लिए एक वेबसाइट डिजाइन कर रहे हैं। स्टाम्प सोसायटी ने हमें हमारे बारे में . बनाने के लिए कहा है के बारे में . पर शीर्षक उनकी वेबसाइट का पेज बोल्ड में दिखाई देता है। यह आगंतुक का ध्यान शीर्षक की ओर आकर्षित करेगा।
स्टाम्प क्लब ने हमें क्लब के इतिहास के साथ अपनी वेबसाइट पर टेक्स्ट का एक ब्लॉक जोड़ने के लिए कहा है। टेक्स्ट का यह ब्लॉक सामान्य फॉन्ट-वेट में दिखना चाहिए। कुछ वाक्यांश, जिन पर क्लब दर्शकों का ध्यान आकर्षित करना चाहता है, उन्हें बोल्ड में दिखना चाहिए।
टेक्स्ट के इस ब्लॉक को बनाने के लिए हम निम्नलिखित कोड का उपयोग कर सकते हैं, कुछ विशेष वाक्यांशों के साथ:
<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;
}
हमारे एचटीएमएल/सीएसएस कोड का आउटपुट देखने के लिए ऊपर दिए गए कोड संपादक में बटन।
हमारी एचटीएमएल फाइल में, हमने
टैग के भीतर संलग्न टेक्स्ट के एक पैराग्राफ को परिभाषित किया है। हमने टैग के भीतर कुछ वाक्यांशों को भी संलग्न किया है, जिन्हें हम अपने CSS कोड में शामिल करने जा रहे हैं।
इसके बाद, हमारी सीएसएस फ़ाइल में, हमने एक शैली नियम परिभाषित किया है जो प्रत्येक टैग के फ़ॉन्ट शैली वजन को bolder पर सेट करता है। . इसका मतलब है कि किसी भी टैग में संलग्न टेक्स्ट मूल तत्व की तुलना में अधिक बोल्ड दिखाई देगा।
जब हम अपना कोड चलाते हैं, तो हमारा पैराग्राफ सामान्य फ़ॉन्ट-वेट के साथ दिखाई देता है, और टैग के भीतर संलग्न वाक्यांश बोल्ड में दिखाई देते हैं। इस उदाहरण में, वाक्यांश सभी का स्वागत करते हैं और 250 सदस्य टैग में संलग्न हैं।
वेरिएबल फ़ॉन्ट्स के साथ बोल्ड टेक्स्ट CSS
CSS फ़ॉन्ट्स के नवीनतम स्तर के माध्यम से हमें कुछ नए फ़ॉन्ट उपलब्ध कराए गए हैं। वे चर फ़ॉन्ट कहलाते हैं और कोई भी . ले सकते हैं इसके फॉन्ट-वेट के रूप में 1 और 1000 के बीच की संख्या। ब्राउज़र समर्थन मई 2020 तक पूरी तरह से लागू नहीं किया गया था, इसलिए वे काफी नए हैं। यदि आप चर फ़ॉन्ट के बारे में अधिक जानकारी चाहते हैं, तो यह परिचय देखें।
निष्कर्ष
इस ट्यूटोरियल में, हमने CSS फॉन्ट-वेट प्रॉपर्टी पर चर्चा की और यह कैसे प्रभावित करता है कि हमारे फॉन्ट कितने बोल्ड हैं।
हमने सीखा कि बोल्डर और लाइटर का अर्थ है मूल तत्व के फ़ॉन्ट-वेट से एक सापेक्ष फ़ॉन्ट-वेट दूर। व्यवहार में, हमने यह देखने के लिए कि टेक्स्ट कैसा दिखता है, फ़ॉन्ट-वेट की एक श्रृंखला देखी। आप कुछ ही समय में फ़ॉन्ट-वेट वाले फ़ॉन्ट को स्टाइल करने में माहिर होंगे!
CSS में कोडिंग के बारे में अधिक जानने के लिए, CSS सीखने के तरीके के बारे में हमारा गाइड पढ़ें। यदि आप CSS पर निर्भर हुए बिना अपने टेक्स्ट को बोल्ड बनाना चाहते हैं, तो आप HTML में बोल्ड टेक्स्ट बनाने के तरीके के बारे में हमारी गाइड पढ़ सकते हैं।