सीएसएस फ़ॉन्ट आकार
फ़ॉन्ट आकार
संपत्ति पाठ का font-sizeआकार निर्धारित करती है।
वेब डिज़ाइन में टेक्स्ट आकार को प्रबंधित करने में सक्षम होना महत्वपूर्ण है। हालाँकि, आपको अनुच्छेदों को शीर्षकों की तरह दिखाने के लिए या शीर्षकों को अनुच्छेदों की तरह दिखाने के लिए फ़ॉन्ट आकार समायोजन का उपयोग नहीं करना चाहिए।
हमेशा उचित HTML टैग का उपयोग करें, जैसे शीर्षकों के लिए <h1> - <h6> और पैराग्राफ के लिए <p>।
फ़ॉन्ट-आकार मान एक पूर्ण, या सापेक्ष आकार हो सकता है।
पूर्ण आकार:
- टेक्स्ट को एक निर्दिष्ट आकार में सेट करता है
- उपयोगकर्ता को सभी ब्राउज़रों में टेक्स्ट का आकार बदलने की अनुमति नहीं देता (पहुंच-योग्यता कारणों से खराब)
- आउटपुट का भौतिक आकार ज्ञात होने पर निरपेक्ष आकार उपयोगी होता है
तुलनात्मक आकार:
- आसपास के तत्वों के सापेक्ष आकार निर्धारित करता है
- उपयोगकर्ता को ब्राउज़र में टेक्स्ट का आकार बदलने की अनुमति देता है
नोट: यदि आप एक फ़ॉन्ट आकार निर्दिष्ट नहीं करते हैं, तो सामान्य पाठ के लिए डिफ़ॉल्ट आकार, जैसे पैराग्राफ, 16px (16px=1em) है।
पिक्सेल के साथ फ़ॉन्ट आकार सेट करें
टेक्स्ट साइज को पिक्सल के साथ सेट करने से आपको टेक्स्ट साइज पर पूरा नियंत्रण मिलता है:
उदाहरण
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 14px;
}
युक्ति: यदि आप पिक्सेल का उपयोग करते हैं, तो भी आप पूरे पृष्ठ का आकार बदलने के लिए ज़ूम टूल का उपयोग कर सकते हैं।
Em . के साथ फ़ॉन्ट आकार सेट करें
उपयोगकर्ताओं को टेक्स्ट (ब्राउज़र मेनू में) का आकार बदलने की अनुमति देने के लिए, कई डेवलपर पिक्सेल के बजाय एम का उपयोग करते हैं।
1em वर्तमान फ़ॉन्ट आकार के बराबर है। ब्राउज़र में डिफ़ॉल्ट टेक्स्ट का आकार 16px है। तो, 1em का डिफ़ॉल्ट आकार 16px है।
इस सूत्र का उपयोग करके आकार को पिक्सेल से em तक परिकलित किया जा सकता है: पिक्सेल /16= em
उदाहरण
h1 {
font-size: 2.5em; /* 40px/16=2.5em */
}
h2 {
font-size: 1.875em; /* 30px/16=1.875em */
}
p {
font-size: 0.875em; /* 14px/16=0.875em */
}
ऊपर के उदाहरण में, एम में टेक्स्ट का आकार पिक्सल में पिछले उदाहरण के समान है। हालांकि, एम आकार के साथ, सभी ब्राउज़रों में टेक्स्ट आकार को समायोजित करना संभव है।
दुर्भाग्य से, अभी भी Internet Explorer के पुराने संस्करणों में समस्या है। पाठ बड़ा होने पर उससे बड़ा हो जाता है, और छोटा होने पर उससे छोटा हो जाता है।
प्रतिशत और Em . के संयोजन का उपयोग करें
समाधान जो सभी ब्राउज़रों में काम करता है, <body> तत्व के लिए डिफ़ॉल्ट फ़ॉन्ट-आकार को प्रतिशत में सेट करना है:
उदाहरण
body {
font-size: 100%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.875em;
}
p {
font-size: 0.875em;
}
हमारा कोड अब बहुत अच्छा काम करता है! यह सभी ब्राउज़रों में समान टेक्स्ट आकार दिखाता है, और सभी ब्राउज़रों को टेक्स्ट को ज़ूम या आकार बदलने की अनुमति देता है!
उत्तरदायी फ़ॉन्ट आकार
टेक्स्ट का आकार एक vwइकाई के साथ सेट किया जा सकता है, जिसका अर्थ है "व्यूपोर्ट चौड़ाई"।
इस तरह टेक्स्ट का आकार ब्राउज़र विंडो के आकार का अनुसरण करेगा:
नमस्ते दुनिया
फ़ॉन्ट आकार कैसे बढ़ता है यह देखने के लिए ब्राउज़र विंडो का आकार बदलें।
उदाहरण
<h1 style="font-size:10vw">Hello World</h1>
व्यूपोर्ट ब्राउज़र विंडो का आकार है। 1vw = व्यूपोर्ट की चौड़ाई का 1%। अगर व्यूपोर्ट 50cm चौड़ा है, तो 1vw 0.5cm है।