HTML में छोटा फॉन्ट कैसे उपयोग करें?

परिचय

HTML में छोटा फॉन्ट सेट करने के लिए, style एट्रिब्यूट का उपयोग करें। style एट्रिब्यूट एक एलिमेंट के लिए इंलाइन स्टाइल निर्दिष्ट करता है। यह एट्रिब्यूट HTML <p> टैग के साथ, CSS प्रॉपर्टी font-size के साथ उपयोग किया जाता है। HTML5 <font> टैग का समर्थन नहीं करता, इसलिए फॉन्ट साइज़ जोड़ने के लिए CSS स्टाइल का उपयोग किया जाता है।

महत्वपूर्ण नोट

style एट्रिब्यूट का उपयोग ग्लोबली सेट किसी भी स्टाइल को ओवरराइड करता है। यह HTML <style> टैग या एक्सटर्नल स्टाइल शीट में सेट किसी भी स्टाइल को ओवरराइड कर देगा।

उदाहरण

<!DOCTYPE html> <html> 
    <head> 
        <title>HTML smaller font</title> 
    </head> 
    <body> 
        <h1>हेडिंग</h1> 
        <p>यह डेमो कंटेंट है।</p> 
        <p style="color:blue;font-size:11px;">यह टेक्स्ट छोटा होगा।</p> 
    </body> 
</html>

आउटपुट

फॉन्ट साइज़ सेट करने के तरीके

1. पिक्सेल (px) - फिक्स्ड साइज़

<p style="font-size: 12px;">12 पिक्सेल</p>
<p style="font-size: 14px;">14 पिक्सेल</p>
<p style="font-size: 16px;">16 पिक्सेल (डिफ़ॉल्ट बेस)</p>

2. रेम (rem) - रूट रिलेटिव (अनुशंसित)

<style>
    html { font-size: 16px; } /* बेस */
    .text-sm { font-size: 0.875rem; }  /* 14px */
    .text-xs { font-size: 0.75rem; }   /* 12px */
    .text-base { font-size: 1rem; }    /* 16px */
    .text-lg { font-size: 1.125rem; }  /* 18px */
    .text-xl { font-size: 1.25rem; }   /* 20px */
</style>

3. ईम (em) - पैरेंट रिलेटिव

<div style="font-size: 16px;">
    <p style="font-size: 0.875em;">14px (16px का 0.875)</p>
    <div style="font-size: 0.875em;">
        <p style="font-size: 0.875em;">12.25px (कंपाउंडिंग!)</p>
    </div>
</div>

4. प्रतिशत (%)

<p style="font-size: 87.5%;">पैरेंट का 87.5%</p>

5. कीवर्ड्स

<p style="font-size: xx-small;">एक्स्ट्रा एक्स्ट्रा स्मॉल</p>
<p style="font-size: x-small;">एक्स्ट्रा स्मॉल</p>
<p style="font-size: small;">स्मॉल</p>
<p style="font-size: medium;">मीडियम (डिफ़ॉल्ट)</p>
<p style="font-size: large;">लार्ज</p>
<p style="font-size: x-large;">एक्स्ट्रा लार्ज</p>
<p style="font-size: xx-large;">एक्स्ट्रा एक्स्ट्रा लार्ज</p>
<p style="font-size: smaller;">पैरेंट से छोटा</p>
<p style="font-size: larger;">पैरेंट से बड़ा</p>

6. क्लैंप (Clamp) - फ्लूइड टाइपोग्राफी (आधुनिक)

<style>
    .fluid-text {
        /* min, preferred, max */
        font-size: clamp(0.875rem, 2vw, 1.125rem);
        /* न्यूनतम 14px, व्यूपोर्ट के साथ स्केल, अधिकतम 18px */
    }
</style>

<small> एलिमेंट (सिमेंटिक)

<small> टैग साइड-कमेंट्स, डिस्क्लेमर्स, कॉपीराइट, कानूनी टेक्स्ट के लिए है - केवल विज़ुअल साइज़ के लिए नहीं।

<p>मुख्य कंटेंट <small>(अस्वीकरण: यह केवल जानकारी के लिए है)</small></p>
<footer><small>© 2024 कंपनी नाम। सर्वाधिकार सुरक्षित।</small></footer>

CSS क्लास सिस्टम (अनुशंसित)

<style>
    :root {
        --text-xs: 0.75rem;    /* 12px */
        --text-sm: 0.875rem;   /* 14px */
        --text-base: 1rem;     /* 16px */
        --text-lg: 1.125rem;   /* 18px */
        --text-xl: 1.25rem;    /* 20px */
        --text-2xl: 1.5rem;    /* 24px */
    }
    
    .text-xs { font-size: var(--text-xs); }
    .text-sm { font-size: var(--text-sm); }
    .text-base { font-size: var(--text-base); }
    .text-lg { font-size: var(--text-lg); }
    .text-xl { font-size: var(--text-xl); }
    .text-2xl { font-size: var(--text-2xl); }
</style>

पुराना अप्रचलित तरीका (उपयोग न करें)

<!-- HTML5 में डिप्रिकेटेड -->
<font size="2">छोटा टेक्स्ट</font>
<font size="-1">एक लेवल छोटा</font>
<small>सिर्फ स्टाइलिंग के लिए</small> <!-- गलत सिमेंटिक उपयोग -->

सर्वोत्तम अभ्यास

1. rem यूनिट्स उपयोग करें - स्केलेबल, एक्सेसिबल, प्रेडिक्टेबल
2. CSS क्लासेज/वेरिएबल्स परिभाषित करें - इंलाइन स्टाइल्स नहीं
3. बेस फॉन्ट साइज़ 16px रखें - ब्राउज़र डिफ़ॉल्ट, उपयोगकर्ता ज़ूम का सम्मान
4. कम से कम 12px (0.75rem) न जाएं - पठनीयता के लिए
5. लाइन हाइट सेट करें - line-height: 1.5-1.7
6. <small> केवल सिमेंटिक उपयोग के लिए - डिस्क्लेमर, कॉपीराइट, साइड नोट्स

एक्सेसिबिलिटी

• उपयोगकर्ता ब्राउज़र ज़ूम/टेक्स्ट साइज़ सेटिंग्स बदल सकते हैं - rem इसका सम्मान करता है
• न्यूनतम कंट्रास्ट अनुपात बनाए रखें
• फोकस स्टेट्स पर फॉन्ट साइज़ न बदलें