पिक्सेल्स (px) में फॉन्ट साइज़
CSS में font-size प्रॉपर्टी सेट करने के लिए आप पिक्सेल्स (px) का भी उपयोग कर सकते हैं। यह तब फायदेमंद होता है जब आपको टेक्स्ट के लिए पिक्सेल-परफेक्ट सटीकता चाहिए।
उदाहरण 1: विभिन्न यूनिट्स के साथ फॉन्ट साइज़
<!DOCTYPE html>
<html>
<head>
<style>
#demo1 { background-color: hsla(140, 100%, 50%, 0.8); }
#demo2 { background-color: hsla(130, 100%, 50%, 0.6); }
#demo3 { background-color: hsla(190, 100%, 50%, 0.4); }
#demo4 { background-color: hsla(170, 100%, 50%, 0.3); }
#demo5 { background-color: hsl(150, 100%, 60%); }
#demo6 {
background-color: rgba(108, 111, 35, 0.6);
font-size: 30px;
color: yellow;
transform: rotate(45deg);
}
</style>
</head>
<body>
<h1>क्रिकेटर्स</h1>
<p id="demo1">डेविड वार्नर</p>
<p id="demo2">स्टीव स्मिथ</p>
<p id="demo3">मार्क वॉ</p>
<p id="demo4">स्टीव वॉ</p>
<p id="demo5">डेविड जॉनसन</p>
<p id="demo6">ऑस्ट्रेलियाई क्रिकेटर्स</p>
</body>
</html>
आउटपुट
अंतिम पैराग्राफ (#demo6) में 30px फॉन्ट साइज़, पीला टेक्स्ट, 45 डिग्री रोटेशन, और सेमी-ट्रांसपेरेंट बैकग्राउंड है।
उदाहरण 2: टेक्स्ट डेकोरेशन के साथ पिक्सेल फॉन्ट साइज़
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
text-decoration: overline;
text-decoration-color: yellow;
font-size: 25px;
}
</style>
</head>
<body>
<h1>परीक्षा विवरण</h1>
<p class="demo">परीक्षा 20 दिसंबर को।</p>
<p class="demo2">परीक्षा सुबह 9 बजे शुरू होती है।</p>
</body>
</html>
आउटपुट
पहले पैराग्राफ में 25px फॉन्ट साइज़ और पीली ओवरलाइन है।
पिक्सेल यूनिट (px) के फायदे:
- सटीक नियंत्रण: सटीक पिक्सेल-स्तरीय नियंत्रण
- संगतता: सभी ब्राउज़र्स/डिवाइसेज में समान आकार
- सरलता: समझने और उपयोग करने में आसान
नुकसान:
- एक्सेसिबिलिटी: ब्राउज़र ज़ूम/टेक्स्ट साइज़ सेटिंग्स का सम्मान नहीं करता
- रिस्पॉन्सिवनेस: मीडिया क्वेरीज के बिना अलग स्क्रीन साइज़ के लिए अनुकूल नहीं
- रिलेटिव स्केलिंग: पैरेंट एलिमेंट के सापेक्ष स्केल नहीं होता
बेहतर विकल्प (मॉडर्न वेब के लिए):
- rem: रूट फॉन्ट साइज़ के सापेक्ष (रिस्पॉन्सिव, एक्सेसिबल)
- em: पैरेंट फॉन्ट साइज़ के सापेक्ष
- clamp(): फ्लूइड टाइपोग्राफी के लिए
font-size: clamp(1rem, 2.5vw, 2rem)
कब px उपयोग करें:
- फिक्स्ड-आकार के UI एलिमेंट्स (आइकन्स, बटन हाइट्स)
- बॉर्डर चौड़ाई, शैडो ऑफसेट्स
- जब पिक्सेल-परफेक्ट डिज़ाइन आवश्यक हो
- प्रिंट स्टाइलशीट्स
