जावास्क्रिप्ट टैग द्वारा बाल तत्व प्राप्त करें

| | | | | | | | | | | | | | | | | | | | | | | |

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

इस लेख में, हम वजन फ़ॉन्ट के बारे में बात करेंगे, इसे कैसे परिभाषित करें, और संपत्ति के विभिन्न संभावित मूल्यों का एक उदाहरण प्रदान करें।

CSS Fat: A Guide

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

सीएसएस फ़ॉन्ट-वेट प्रॉपर्टी का सिंटैक्स इस प्रकार है:।

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

फ़ॉन्ट-वेट प्रॉपर्टी कुछ अलग स्वीकार करती है मान, उस फ़ॉन्ट वजन के आधार पर जिसे आप किसी विशेष तत्व के लिए सेट करना चाहते हैं।

CSS स्केल बोल्ड

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

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

निम्न कोड दिखाता है कि संख्याओं और शब्दों का उपयोग करके एक लोकप्रिय फ़ॉन्ट `एरियल` कितना हल्का और कितना गहरा हो सकता है - कुंजी:

और अधिक स्पष्ट बोल्ड: उनका वास्तव में क्या मतलब है?

मुख्य बात जो यहां बताई जानी चाहिए वह यह है कि हल्का और बोल्डर शाब्दिक अनुवाद नहीं है। बोल्डर का अर्थ "बोल्ड से बोल्ड" नहीं है

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

सापेक्ष वर्ण भार इस प्रकार हैं:

<तालिका वर्ग = "wp-bloc en table-info तालिका"> सापेक्ष वर्ण भार < td> वास्तविक फ़ॉन्ट वजन पतला 100 सामान्य td> < td> 400 बोल्ड 700 भारी 900

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

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

उदाहरण सीएसएस फ़ॉन्ट वजन

मान लें कि आप एक वेबसाइट डिजाइन कर रहे हैं सिएटल स्टाम्प क्लब के लिए, एक स्थानीय स्टाम्प कंपनी। जिस स्टैंप कंपनी को हमने कौन हैं - हम एन-हेड करने के लिए कहा है, वे A के बारे में उनकी वेबसाइट पर बोल्ड दिखाई देते हैं। यह शीर्षक पर आगंतुक का ध्यान आकर्षित करेगा।

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

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

क्लिक शैली की छवि बटन हमारे HTML / CSS कोड का आउटपुट देखने के लिए ऊपर दिए गए कोड संपादक में।

हमारी एचटीएमएल फाइल में, हमने

के एक टेक्स्ट संलग्न पैराग्राफ को परिभाषित किया है; . टैग हमने में कुछ वाक्यों को भी शामिल किया है। टैग, जिन्हें हम अपने सीएसएस में प्रोत्साहित करते हैं

अगला, हमारी सीएसएस फ़ाइल में, हमने एक शैली नियम परिभाषित किया है जो प्रत्येक < की फ़ॉन्ट शैली के वजन को परिभाषित करता है। /a> टैग बोल्डर। इसका मतलब है कि टैग में संलग्न टेक्स्ट मूल तत्व की तुलना में अधिक बोल्ड दिखाई देता है।

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

परिवर्तनीय वर्णों के साथ बोल्ड सीएसएस पाठ

सीएसएस फोंट के नवीनतम स्तर द्वारा हमें कुछ नए फोंट उपलब्ध कराए गए हैं। वे चर वर्ण कहलाते हैं और वर्ण चौड़ाई के रूप में 1 और 1000 के बीच एक संख्या ले सकते हैं। ब्राउज़र समर्थन मई 2020 तक पूरी तरह से लागू नहीं किया गया था, इसलिए वे काफी नए हैं। यदि आप चर फ़ॉन्ट के बारे में अधिक जानकारी चाहते हैं, तो यह rel = "noopener"> l ` परिचय देखें।

निष्कर्ष

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

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

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