CSS font-size प्रॉपर्टी आपके पेज या वेबसाइट पर किसी भी टेक्स्ट एलिमेंट का फ़ॉन्ट साइज़ सेट करती है। font-size प्रॉपर्टी को किसी भी क्लास, ID, या टेक्स्ट कंटेंट शामिल करने वाले एलिमेंट पर लागू किया जा सकता है। प्रॉपर्टी px, em, rem, vw, vh में मान और कीवर्ड्स का उपयोग करके स्वीकार करती है।
फॉन्ट साइज़ निर्दिष्ट करने के तरीके
1. पिक्सेल (Pixels) - निरपेक्ष इकाई
फॉन्ट का आकार सेट करने के सबसे सामान्य तरीकों में से एक पिक्सेल का उपयोग करना है।
h1 { font-size: 28px; }
p { font-size: 12px; }
फायदे: सटीक नियंत्रण, ब्राउज़र्स और OS में काफी सुसंगत।
सीमा: एक्सेसिबिलिटी समस्या - कुछ ब्राउज़र्स उपयोगकर्ताओं को पिक्सेल-आधारित फ़ॉन्ट साइज़ कस्टमाइज़ करने की अनुमति नहीं देते। दृष्टिबाधित उपयोगकर्ता संघर्ष कर सकते हैं।
2. em यूनिट्स - पैरेंट के सापेक्ष
em माप की इकाई पैरेंट एलिमेंट के फ़ॉन्ट साइज़ को संदर्भित करती है। यदि आप फ़ॉन्ट के आकार को 2em पर सेट करते हैं, तो फ़ॉन्ट साइज़ पैरेंट एलिमेंट का दोगुना होगा।
/* पैरेंट का फ़ॉन्ट साइज़ 20px है */
.child { font-size: 1em; } /* 20px */
.child { font-size: 2em; } /* 40px */
यदि पैरेंट के लिए फ़ॉन्ट साइज़ सेट नहीं किया गया है, तो ब्राउज़र डिफ़ॉल्ट (आमतौर पर 16px) का उपयोग करेगा। इसलिए डिफ़ॉल्ट रूप से 1em = 16px, 2em = 32px।
3. rem (रूट em) - रूट एलिमेंट के सापेक्ष
rem CSS3 में पेश की गई एक नई माप की इकाई है जिसका उपयोग फ़ॉन्ट साइज़ सेट करने के लिए किया जा सकता है। rem का उपयोग करने वाले मान रूट <html> एलिमेंट के सापेक्ष होते हैं, पैरेंट एलिमेंट के बजाय।
rem मान उपयोगी हैं क्योंकि वे आपको पूरे दस्तावेज़ के सापेक्ष मान निर्दिष्ट करने की अनुमति देते हैं। इस तरह, आपके टेक्स्ट का आकार प्रभावित नहीं होगा यदि पैरेंट एलिमेंट का एक अलग em मान है।
html { font-size: 16px; } /* डिफ़ॉल्ट */
p { font-size: 1rem; } /* 16px */
h1 { font-size: 1.5rem; } /* 24px */
4. कीवर्ड्स (Keywords)
CSS में फ़ॉन्ट का आकार सेट करने के लिए आप दो प्रकार के कीवर्ड्स का उपयोग कर सकते हैं।
निरपेक्ष कीवर्ड्स: वेब पेज में परिवर्तनों के बावजूद समान रहने वाला फ़ॉन्ट साइज़ सेट करते हैं।
xx-small(9px),x-small(10px),small(13px),medium(16px),large(18px),x-large(24px),xx-large(32px)
कोष्ठक में मान 16px डिफ़ॉल्ट ब्राउज़र फ़ॉन्ट साइज़ पर आधारित हैं।
सापेक्ष कीवर्ड्स: ऐसा फ़ॉन्ट साइज़ सेट करते हैं जो वेब पेज पर कहीं और फ़ॉन्ट साइज़िंग के आधार पर बदल जाएगा। सापेक्ष कीवर्ड्स हैं: smaller और larger।
5. व्यूपोर्ट यूनिट्स (Viewport Units)
व्यूपोर्ट यूनिट्स की गणना ब्राउज़र के व्यूपोर्ट आकार के प्रतिशत के रूप में की जाती है। CSS द्वारा समर्थित दो व्यूपोर्ट यूनिट्स हैं: व्यू हाइट (vh) और व्यू विड्थ (vw)।
क्योंकि व्यूपोर्ट यूनिट्स ब्राउज़र के व्यूपोर्ट आकार का प्रतिशत हैं, 1vh व्यूपोर्ट हाइट का 1% के बराबर है। इसलिए, यदि आपके पास 1000px चौड़ा व्यूपोर्ट है, तो 1vw 10px के बराबर है।
व्यूपोर्ट यूनिट्स का उपयोग करना उपयोगी है क्योंकि आपके फ़ॉन्ट का आकार ब्राउज़र विंडो का आकार बदलने पर बदल जाएगा। यह, बदले में, आपको विभिन्न ब्राउज़र और डिवाइस आकारों के अनुकूल अधिक सुलभ उपयोगकर्ता अनुभव प्रदान करने की अनुमति देता है।
p { font-size: 1vw; }
h1 { font-size: 4vw; }
निष्कर्ष
font-size प्रॉपर्टी का उपयोग CSS (और इसलिए HTML) में फ़ॉन्ट्स के आकार को बदलने के लिए किया जाता है। यह फ़ॉन्ट साइज़ प्रदर्शित करने के लिए कई माप इकाइयों को स्वीकार करता है, जिसमें पिक्सेल, em, rem, कीवर्ड्स, और व्यूपोर्ट यूनिट्स शामिल हैं। इसे CSS क्लासेज और IDs के साथ-साथ एलिमेंट्स स्वयं पर लागू किया जा सकता है।
यह ट्यूटोरियल CSS फ़ॉन्ट साइज़ की मूल बातों से गुजरा। अब आप एक विशेषज्ञ की तरह font-size एट्रिब्यूट का उपयोग शुरू करने के लिए तैयार हैं।
