Computer >> कंप्यूटर >  >> प्रोग्रामिंग >> CSS

CSS फॉन्ट-कर्निंग, लेटर-स्पेसिंग और वर्ड-स्पेसिंग प्रॉपर्टी

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

फ़ॉन्ट केर्निंग

फ़ॉन्ट-कर्निंग यह है कि दो अलग-अलग वर्णों के बीच रिक्ति कैसे निर्धारित की जाती है। अक्षरों के बीच अधिक समान अंतर होने के कारण फ़ॉन्ट जिन्हें अच्छी तरह से गुंथा हुआ माना जाता है, उनमें बेहतर दृश्य अपील होती है। CSS फॉन्ट-कर्निंग प्रॉपर्टी के तीन संभावित मान हैं:कोई नहीं, सामान्य, ऑटो .

    <शीर्षक> रिक्ति <शैली> div { फ़ॉन्ट-आकार:2rem; फ़ॉन्ट-परिवार:सेरिफ़; } #nokern { फॉन्ट-कर्निंग:कोई नहीं; } #kern { फॉन्ट-कर्निंग:सामान्य; }    
AV Ta
AV Ta

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

लेटर-स्पेसिंग

कर्निंग के विपरीत, लेटर-स्पेसिंग गुण टेक्स्ट की एक पंक्ति में सभी अक्षरों में एक समान रिक्ति है। इसमें लंबाई लगती है पीएक्स, रेम, या ईएम में मान। ये मान सकारात्मक या नकारात्मक हो सकते हैं।

    <शीर्षक> रिक्ति <शैली> div { फ़ॉन्ट-आकार:2rem; फ़ॉन्ट-परिवार:सेरिफ़; } #बिग-स्पेसिंग { लेटर-स्पेसिंग:5px; } #लिटिल-स्पेसिंग { लेटर-स्पेसिंग:1px; }    
Hello World
Hello World

वर्ड-स्पेसिंग

अक्षर रिक्ति की तरह, शब्द-अंतर का शाब्दिक अर्थ है शब्दों के बीच का अंतर। डिफ़ॉल्ट 0.25em है, लेकिन एक सकारात्मक या नकारात्मक लंबाई ले सकता है।

    <शीर्षक> रिक्ति <शैली> div { फ़ॉन्ट-आकार:2rem; फ़ॉन्ट-परिवार:सेरिफ़; } #बिग-स्पेसिंग { वर्ड-स्पेसिंग:5रेम; } #लिटिल-स्पेसिंग { वर्ड-स्पेसिंग:1rem; }    
Hello World
Hello World

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

81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।

बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।


  1. सीएसएस अलगाव संपत्ति

    आइसोलेशन प्रॉपर्टी का उपयोग यह परिभाषित करने के लिए किया जाता है कि क्या किसी तत्व को एक नई स्टैकिंग सामग्री बनानी चाहिए। वाक्य रचना इस प्रकार है - सिंटैक्स isolation: auto|isolate|initial|inherit; उदाहरण <!DOCTYPE html> <html> <head> <style> .demo1 {    background-

  1. CSS में लेटर स्पेसिंग

    CSS लेटर-स्पेसिंग प्रॉपर्टी का उपयोग करके अक्षरों के बीच के स्थान को समायोजित किया जा सकता है। CSS लेटर-स्पेसिंग प्रॉपर्टी का सिंटैक्स इस प्रकार है- सिंटैक्स Selector {    letter-spacing: /*value*/ } निम्नलिखित उदाहरण CSS लेटर-स्पेसिंग प्रॉपर्टी को दर्शाते हैं - उदाहरण <!DOCTYPE html&g

  1. वर्ड स्पेसिंग CSS के साथ कार्य करना

    CSS वर्ड-स्पेसिंग प्रॉपर्टी का उपयोग किसी तत्व के शब्दों के बीच की जगह को निर्दिष्ट करने के लिए किया जाता है। सिंटैक्स CSS वर्ड-स्पेसिंग प्रॉपर्टी का सिंटैक्स इस प्रकार है - Selector {    word-spacing: /*value*/ } उदाहरण निम्नलिखित उदाहरण CSS वर्ड-स्पेसिंग गुण को दर्शाते हैं - <!DOCTY