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

सीएसएस में पिक्सेल के साथ फ़ॉन्ट आकार सेट करना

<घंटा/>

CSS में font-size गुण सेट करने के लिए, आप pixel(px) का भी उपयोग कर सकते हैं। यह तब फायदेमंद होता है जब आपको टेक्स्ट के लिए पिक्सेल सटीकता की आवश्यकता होती है।

उदाहरण

आइए पिक्सेल के साथ फ़ॉन्ट आकार सेट करने के लिए एक उदाहरण देखें -

<!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>Cricketers</h1>
<p id="demo1">David Warner</p>
<p id="demo2">Steve Smith</p>
<p id="demo3">Mark Waugh</p>
<p id="demo4">Steve Waugh</p>
<p id="demo5">David Johnson</p>
<p id="demo6">Australian Cricketers</p>
</body>
</html>

आउटपुट

सीएसएस में पिक्सेल के साथ फ़ॉन्ट आकार सेट करना

उदाहरण

आइए अब एक और उदाहरण देखें -

<!DOCTYPE html>
<html>
<head>
<style>
.demo {
   text-decoration: overline;
   text-decoration-color: yellow;
   font-size: 25px;
}
</style>
</head>
<body>
<h1>Examination Details</h1>
<p class="demo">Exam on 20th December.</p>
<p class="demo2">Exam begins at 9AM.</p>
</body>
</html>

आउटपुट

सीएसएस में पिक्सेल के साथ फ़ॉन्ट आकार सेट करना


  1. CSS का उपयोग करके रेडियल ग्रेडिएंट का आकार निर्धारित करना

    रेडियल ग्रेडिएंट का आकार सेट करने के लिए, रेडियल-ग्रेडिएंट () फ़ंक्शन का उपयोग करें। यह फ़ंक्शन पृष्ठभूमि छवि के रूप में एक रेडियल ग्रेडिएंट सेट करता है। फ़ंक्शन में दूसरा पैरामीटर नीचे दिए गए उदाहरण के अनुसार इच्छित आकार के रूप में सेट किया जाना है - background-image: radial-gradient(40% 50px at ce

  1. CSS टैब-आकार की संपत्ति के साथ HTML में टैब आकार सेट करना

    CSS टैब-आकार की संपत्ति हमें टैब में उपयोग किए जाने वाले व्हॉट्सएप की मात्रा निर्धारित करने की अनुमति देता है। निम्नलिखित उदाहरण CSS टैब-आकार की संपत्ति को दर्शाते हैं। उदाहरण <!DOCTYPE html> <html> <head> <style> body {    display: flex;    flex-direction

  1. CSS लेटर-स्पेसिंग प्रॉपर्टी वाले लेटर्स के बीच स्पेस सेट करना

    CSS लेटर-स्पेसिंग प्रॉपर्टी का उपयोग करके, हम टेक्स्ट के अक्षरों के बीच स्पेस की मात्रा निर्दिष्ट कर सकते हैं। उदाहरण निम्नलिखित उदाहरण CSS लेटर-स्पेसिंग प्रॉपर्टी को दर्शाते हैं। p:फर्स्ट-ऑफ़-टाइप { मार्जिन:3%; गद्दी:3%; पृष्ठभूमि-रंग:समुद्री हरा; रंग सफेद; लेटर-स्पेसिंग:2em; फ़ॉन्ट-आकार:2em; text