सीएसएस फॉन्ट-साइज प्रॉपर्टी आपके पेज या वेबसाइट पर किसी भी टेक्स्ट एलिमेंट का फॉन्ट साइज सेट करती है। फ़ॉन्ट-आकार की संपत्ति किसी भी वर्ग, आईडी या तत्व पर लागू की जा सकती है जिसमें टेक्स्ट सामग्री शामिल है। संपत्ति px, em, rem, vw, vh, और कीवर्ड का उपयोग करके मान स्वीकार करती है।

अधिकांश डेवलपर वेब पेज को स्टाइल करने के लिए विभिन्न फ़ॉन्ट आकारों के संयोजन का उपयोग करते हैं। उदाहरण के लिए, एक वेब डेवलपर शीर्षकों के लिए एक बड़े फ़ॉन्ट का उपयोग कर सकता है, और बॉडी टेक्स्ट और अन्य के लिए एक छोटा फ़ॉन्ट का उपयोग कर सकता है। बहुत से लोग पूछते हैं:आप CSS या HTML में फ़ॉन्ट आकार कैसे बदलते हैं?

सीएसएस font-size संपत्ति डेवलपर्स को वेब पेज पर एक पैराग्राफ या टेक्स्ट की पंक्ति में फ़ॉन्ट आकार सेट करने की अनुमति देती है।

यह ट्यूटोरियल उदाहरणों के संदर्भ में चर्चा करता है कि font-size . का उपयोग कैसे करें संपत्ति। इस गाइड को पढ़ने से आप टेक्स्ट साइज बदलने में विशेषज्ञ बन सकते हैं।

सीएसएस font-size

उपयुक्त फ़ॉन्ट स्टाइलिंग वेब डिज़ाइन का एक महत्वपूर्ण हिस्सा है। अनस्टाइल्ड टेक्स्ट के कारण आगंतुकों को पढ़ने में कठिनाई होती है, जिसके परिणामस्वरूप लगभग निश्चित रूप से एक अप्रिय वेबसाइट अनुभव होता है।

फोंट के लिए कई सीएसएस शैलियाँ हैं जिनका उपयोग टेक्स्ट के प्रकट होने के तरीके को अनुकूलित करने के लिए किया जा सकता है, जैसे फ़ॉन्ट-वेट, फ़ॉन्ट-फ़ैमिली, टेक्स्ट-डेकोरेशन और रंग। एक अन्य महत्वपूर्ण गुण फ़ॉन्ट-आकार है, जो टेक्स्ट के एक ब्लॉक में फ़ॉन्ट के आकार को नियंत्रित करता है।

CSS font-size . के लिए सिंटैक्स संपत्ति है:

फ़ॉन्ट-आकार:sizeValue;

sizeValue वह फ़ॉन्ट आकार है जिसे आप टेक्स्ट के एक ब्लॉक का उपयोग करना चाहते हैं। टेक्स्ट के एक ब्लॉक द्वारा उपयोग किए जाने वाले फ़ॉन्ट आकार को निर्दिष्ट करने के कई तरीके हैं। इस लेख में हम जिन तरीकों की चर्चा करने जा रहे हैं वे हैं:

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

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

• पिक्सेल
• उन्हें
• उन्हें रूट करें
• व्यूपोर्ट इकाइयां
• कीवर्ड

आइए हम एक उदाहरण देखें कि वेब पेज पर प्रत्येक फ़ॉन्ट आकार दृष्टिकोण का उपयोग कैसे करें।

पिक्सेल का उपयोग करके फ़ॉन्ट आकार सेट करें

किसी फ़ॉन्ट का आकार सेट करने के सबसे सामान्य तरीकों में से एक पिक्सेल का उपयोग करना है।

पिक्सेल माप की एक अच्छी इकाई हैं क्योंकि वे आपको सटीक होने की अनुमति देते हैं। पिक्सेल इकाई ऑपरेटिंग सिस्टम या वेब ब्राउज़र से काफी हद तक अप्रभावित रहती है। एक स्क्रीन पर एक पिक्सेल दूसरे पर एक पिक्सेल है। आपके द्वारा निर्दिष्ट पिक्सेल मान मोटे तौर पर विभिन्न ब्राउज़रों में एक ही तरह दिखाई देगा।

हालांकि, टेक्स्ट के किसी ब्लॉक में फ़ॉन्ट का आकार सेट करने के लिए पिक्सेल का उपयोग करने की एक सीमा होती है:अभिगम्यता। पिक्सेल का उपयोग करके परिभाषित फ़ॉन्ट आकार पहुँच योग्य नहीं हैं क्योंकि कुछ ब्राउज़र उपयोगकर्ताओं को फ़ॉन्ट आकार को अनुकूलित करने की अनुमति नहीं देते हैं। उदाहरण के लिए, दृष्टिबाधित उपयोगकर्ता ऐसी साइट का उपयोग करने के लिए संघर्ष कर सकते हैं जो फ़ॉन्ट आकार निर्धारित करने के लिए पिक्सेल का उपयोग करती है।

मान लें कि हम 28px . के फ़ॉन्ट आकार वाली वेबसाइट बना रहे हैं सभी के लिए <h1> तत्व और 12px सभी के लिए <p> तत्व हम इस कार्य को पूरा करने के लिए निम्नलिखित कोड का उपयोग कर सकते हैं:

h1 {फ़ॉन्ट-आकार:28px; }p (फ़ॉन्ट-आकार:12px; }

हमारे कोड में, हमने एक CSS चयनकर्ता का उपयोग किया है जो सभी <h1> . के फ़ॉन्ट आकार को सेट करता है तत्वों से 28px और सभी <p> तत्वों से 12px . निम्नलिखित स्निपेट दिखाता है कि ये तत्व हमारे नए फ़ॉन्ट आकार के साथ कैसे दिखाई देते हैं:

 
यह एक शीर्षक है।
 

यह पाठ का एक पैराग्राफ है।

ईएमएस का उपयोग करके फ़ॉन्ट आकार सेट करें

CSS में फ़ॉन्ट का आकार निर्धारित करने का एक अन्य सामान्य तरीका em आकार का उपयोग करना है। माप की एम इकाई मूल तत्व के फ़ॉन्ट आकार को संदर्भित करती है। यदि आप किसी फ़ॉन्ट का आकार 2em . पर सेट करते हैं , फ़ॉन्ट का आकार मूल तत्व से दोगुना होगा।

ईएमएस के साथ CSS फॉन्ट साइजिंग का एक उदाहरण

उदाहरण के लिए, मान लें कि आपके पास एक बॉक्स में संग्रहीत टेक्स्ट का पैराग्राफ है। बॉक्स का फ़ॉन्ट आकार 20px है . यदि आपने टेक्स्ट के पैराग्राफ़ का फ़ॉन्ट आकार 1em . निर्दिष्ट किया है , अनुच्छेद का फ़ॉन्ट आकार 20px . होगा . यह मूल तत्व के फ़ॉन्ट आकार के समान है।

यदि आपने मूल तत्व के लिए फ़ॉन्ट आकार सेट नहीं किया है, तो ब्राउज़र उस ब्राउज़र के लिए निर्दिष्ट डिफ़ॉल्ट मान का उपयोग करेगा। यह आमतौर पर 16px होता है . परिणामस्वरूप, यदि आपने कोई फ़ॉन्ट आकार निर्दिष्ट नहीं किया है, 1em डिफ़ॉल्ट रूप से है 16px , 2em डिफ़ॉल्ट रूप से है 32px ।

मान लीजिए हमारे वेब पेज का फ़ॉन्ट आकार 16px है . हम चाहते हैं कि टेक्स्ट के सभी पैराग्राफ उस फ़ॉन्ट आकार का उपयोग करते हुए दिखाई दें, जिसका अर्थ है कि हमें 1em मान का उपयोग करना चाहिए . साथ ही, हम चाहते हैं कि हमारे सभी शीर्षक 24px . के फ़ॉन्ट आकार के साथ दिखाई दें , जो 1.5em . के बराबर है .

हम इस कार्य को पूरा करने के लिए निम्नलिखित कोड का उपयोग कर सकते हैं:

पी {फ़ॉन्ट-आकार:1em; }h1 {फ़ॉन्ट-आकार:1.5em; } 

 हमारे कोड में, सभी पैराग्राफों का आकार 16px . होगा (1em =16px डिफ़ॉल्ट रूप से), और सभी <h1> तत्व 24px होंगे (1.5em =24px ) 
 

 यहां बताया गया है कि वेब पेज पर हमारा टेक्स्ट कैसा दिखाई देगा:
 
 <शैली> पी { फ़ॉन्ट-आकार:1em; } h1 {फ़ॉन्ट-आकार:1.5em; } 
यह एक शीर्षक है।
 

यह पाठ का एक पैराग्राफ है।
 

 उपरोक्त उदाहरण में, आप हमारे <h1> . दोनों के लिए नई शैली देख सकते हैं और <p> तत्व।
 

 आपको ध्यान देना चाहिए कि यदि हमारा <h1> एक बॉक्स के भीतर दिखाई दिया जिसमें एक और फ़ॉन्ट आकार था, हमारे <h1> . का आकार बदल जाएगा। ऐसा इसलिए है क्योंकि em मान उनके माता-पिता के फ़ॉन्ट आकार को प्राप्त करते हैं।
 
रूट एम का उपयोग करके फ़ॉन्ट आकार सेट करें
 

 रूट एम के लिए छोटा, rem CSS3 में पेश की गई माप की एक नई इकाई है जिसका उपयोग फ़ॉन्ट आकार सेट करने के लिए किया जा सकता है। rem का उपयोग करने वाले मान जड़ के सापेक्ष हैं <html> मूल तत्व के बजाय तत्व।
 

 rem मान उपयोगी होते हैं क्योंकि वे आपको संपूर्ण दस्तावेज़ के सापेक्ष मान निर्दिष्ट करने की अनुमति देते हैं। इस तरह, यदि मूल तत्व का em मान भिन्न है, तो आपके टेक्स्ट का आकार प्रभावित नहीं होगा।
 

 मान लीजिए कि हमारे पास 16px . के डिफ़ॉल्ट फ़ॉन्ट आकार वाला एक वेब पेज है . हमारे पिछले उदाहरण की तरह, हम सभी <h1> . चाहते हैं s 24px . में प्रदर्शित होने के लिए और सभी अनुच्छेद 16px . में प्रदर्शित होने के लिए . हम निम्नलिखित कोड का उपयोग करके इन फ़ॉन्ट आकारों को सेट कर सकते हैं:
 
 
यह एक शीर्षक है।
 

यह पाठ का एक पैराग्राफ है।
 

 हमारा कोड लगभग हमारे पिछले उदाहरण जैसा ही है। अंतर केवल इतना है कि हम जिस माप की इकाई का उपयोग करते हैं वह है rem em . के बजाय . इस उदाहरण में, हमारे फ़ॉन्ट आकार अभी भी 24px . ही रहेंगे और 16px क्रमशः शीर्ष-स्तरीय शीर्षकों और अनुच्छेदों के लिए। ऐसा इसलिए है क्योंकि हमारे वेब पेज का डिफ़ॉल्ट फ़ॉन्ट आकार 16px . है ।
 
कीवर्ड का उपयोग करके फ़ॉन्ट आकार सेट करें
 

 CSS में एक फ़ॉन्ट का आकार सेट करने के लिए आप दो प्रकार के कीवर्ड का उपयोग कर सकते हैं।
 

 निरपेक्ष कीवर्ड का उपयोग एक फ़ॉन्ट आकार सेट करने के लिए किया जाता है जो वेब पेज में परिवर्तन के बावजूद समान रहता है। एक पूर्ण फ़ॉन्ट आकार सेट करने के लिए आप जिन कीवर्ड का उपयोग कर सकते हैं वे इस प्रकार हैं:
 
 
xx-small (9पीएक्स)
 
x-small (10पीएक्स)
 
small (13पीएक्स)
 
medium (16px)
 
large (18पीएक्स)
 
x-large (24px)
 
xx-large (32पीएक्स)
 
 

 कोष्ठकों में निर्दिष्ट मान एक ब्राउज़र पर आधारित होते हैं जिसका डिफ़ॉल्ट फ़ॉन्ट आकार 16px . है ।
 

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

 मान लीजिए हम सभी का आकार सेट करना चाहते हैं <h2> किसी पृष्ठ पर 24px . के तत्व (x-बड़ा) और सभी <h3> तत्वों से 18px (बड़ा)। हम इस कोड का उपयोग करके ऐसा कर सकते हैं:
 
 
यह एक शीर्षक है।
 

यह कुछ पैराग्राफ टेक्स्ट है।
 
यह एक निचले स्तर का शीर्षक है।
 

यह कुछ और पैराग्राफ टेक्स्ट है।
 

  हमारे एचटीएमएल/सीएसएस कोड का आउटपुट देखने के लिए ऊपर दिए गए कोड संपादक में बटन। 
 

 हमारे <h2> . के लिए फ़ॉन्ट आकार और <h3> टैग हैं 24px और 18px , क्रमश। हालाँकि, हमने पिक्सेल का उपयोग करके इन आकारों को निर्दिष्ट नहीं किया। इसके बजाय, हमने ब्राउज़र द्वारा पेश किए गए डिफ़ॉल्ट फ़ॉन्ट आकार कीवर्ड का उपयोग किया।
 
व्यूपोर्ट इकाइयों का उपयोग करके फ़ॉन्ट आकार सेट करें
 

 व्यूपोर्ट इकाइयों की गणना ब्राउज़र के व्यूपोर्ट आकार के प्रतिशत के रूप में की जाती है। सीएसएस द्वारा समर्थित दो व्यूपोर्ट इकाइयां हैं:ऊंचाई देखें (vh ) और चौड़ाई देखें (vw )।
 

 चूंकि व्यूपोर्ट इकाइयां ब्राउज़र के व्यूपोर्ट आकार का एक प्रतिशत हैं, 1vh उदाहरण के लिए, व्यूपोर्ट की ऊंचाई के 1% के बराबर है। इसलिए, यदि आपके पास 1000px चौड़ा व्यूपोर्ट है, 1vh 10px के बराबर होता है।
 

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

 मान लीजिए हम एक ऐसी साइट बनाना चाहते हैं जिसके हेडर व्यूपोर्ट की चौड़ाई के 4% हों और जिनके पैराग्राफ व्यूपोर्ट की चौड़ाई के 1% हों। हम इस कोड का उपयोग करके ऐसा कर सकते हैं:
 
 
यह एक शीर्षक है।
 

यह पाठ का एक पैराग्राफ है।
 

  हमारे एचटीएमएल/सीएसएस कोड का आउटपुट देखने के लिए ऊपर दिए गए कोड संपादक में बटन। 
 

 यदि आप ब्राउज़र का आकार बदलते हैं, तो इन शीर्षकों का आकार बदल जाएगा।
 
निष्कर्ष
 

 फ़ॉन्ट के आकार को बदलने के लिए CSS (और इसलिए HTML) में फ़ॉन्ट-आकार की संपत्ति का उपयोग किया जाता है। यह माप की कई इकाइयों को स्वीकार करता है जिसमें पिक्सेल, एम, रेम, कीवर्ड और व्यूपोर्ट इकाइयों सहित फ़ॉन्ट आकार प्रदर्शित किए जा सकते हैं। इसे CSS कक्षाओं और आईडी के साथ-साथ स्वयं तत्वों पर भी लागू किया जा सकता है।
 

 इस ट्यूटोरियल में CSS फॉन्ट साइज की मूल बातें बताई गई हैं। अब आप एक विशेषज्ञ की तरह फ़ॉन्ट-आकार विशेषता का उपयोग शुरू करने के लिए तैयार हैं।