सीएसएस फ़ॉन्ट आकार

फ़ॉन्ट आकार

font-size प्रॉपर्टी को टेक्स्ट का आकार सेट करें

वेब प्रोजेक्ट में, टेक्स्ट आकार का प्रबंधन करना महत्वपूर्ण है। लेकिन पैराग्राफ को शीर्षक के रूप में दिखाने या शीर्षक को पैराग्राफ के रूप में दिखाने के लिए फ़ॉन्ट आकार को समायोजित नहीं करना चाहिए।

हमेशा सही HTML टैग का उपयोग करें, जैसे <h1> - <h6> शीर्षक के लिए और <p> केवल पैराग्राफ के लिए।

font-size वैल्यू अभिकृत या सापेक्षिक आकार हो सकता है

अभिकृत आकार:

  • टेक्स्ट को निर्दिष्ट आकार सेट करें
  • उपयोगकर्ता को सभी ब्राउज़रों में टेक्स्ट आकार को बदलने की अनुमति नहीं देता (सुलभता बुरी है)
  • जब आउटपुट का भौतिक आकार ज्ञात है, तो अभिकृत आकार बहुत उपयोगी होता है

सापेक्षिक आकार:

  • आसपास के एलिमेंट के अनुसार आकार सेट करें
  • उपयोगकर्ता को ब्राउज़र में टेक्स्ट आकार को बदलने की अनुमति दें

टिप्पणी:अगर आप फ़ॉन्ट आकार को निर्दिष्ट नहीं करते, तो सामान्य टेक्स्ट (जैसे पैराग्राफ) का डिफ़ॉल्ट आकार 16px है (16px = 1em)।

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

पिक्सल का उपयोग करके टेक्स्ट आकार को पूरी तरह से नियंत्रित कर सकते हैं:

इंस्टांस

h1 {
  font-size: 40px;
}
h2 {
  font-size: 30px;
}
p {
  font-size: 14px;
}

अपने आप से प्रयास करें

सूचना:अगर आप पिक्सल का उपयोग करते हैं, तो आप फुलाकर के उपयोग से पूरे पृष्ठ के आकार को समायोजित कर सकते हैं。

ईम के द्वारा फ़ॉन्ट आकार सेट करें

उपयोगकर्ता को टेक्स्ट आकार को समायोजित करने की अनुमति देने (ब्राउज़र मेनू में) के लिए, कई डेवलपरों ईम का उपयोग करते हैं न कि पिक्सल।

W3C ईम इकाई का उपयोग करने की सिफारिश करता है。

1em इस वर्तमान फ़ॉन्ट आकार के बराबर है। ब्राउज़र में डिफ़ॉल्ट टेक्स्ट आकार 16px है। इसलिए डिफ़ॉल्ट 1em 16px है।

इस के लिए आकार की गणना पिक्सल से ईम में करने के लिए इस फॉर्मूला का उपयोग कर सकते हैं: pixels/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 */
}

अपने आप से प्रयास करें

इस उदाहरण में, ईम इकाई के टेक्स्ट आकार पिछले उदाहरण में पिक्सल आकार के समान है। लेकिन अगर ईम आकार का उपयोग किया जाता है, तो सभी ब्राउज़रों में टेक्स्ट आकार को समायोजित किया जा सकता है。

दुर्भाग्य से पुराने संस्करण के इंटरनेट एक्सप्लोरर में अभी भी समस्याएँ हैं। टेक्स्ट को बढ़ाने के दौरान यह जितना बड़ा होना चाहिए, उससे भी बड़ा होता है और छोटा करने के दौरान यह जितना छोटा होना चाहिए, उससे भी छोटा होता है。

इस्पनस और ईम के संयोजन का उपयोग करें

इंस्टांस

body {
  font-size: 100%;
}
h1 {
  font-size: 2.5em;
}
h2 {
  font-size: 1.875em;
}
p {
  font-size: 0.875em;
}

अपने आप से प्रयास करें

हमारा कोड अभी बहुत अच्छा चल रहा है! यह सभी ब्राउज़रों में एक समान टेक्स्ट आकार दिखाता है और सभी ब्राउज़रों को टेक्स्ट आकार को स्केल करने या समायोजित करने की अनुमति देता है!

रिस्पांसिव फ़ॉन्ट आकार

इसे इस्तेमाल किया जा सकता है vw इकाई सेट टेक्स्ट आकार, इसका अर्थ है "व्यूपॉर्ट आकार" ("viewport width")。

इस प्रकार, टेक्स्ट आकार ब्राउज़र विंडो के आकार के अनुसार होगा, ब्राउज़र विंडो के आकार को समायोजित करें ताकि फ़ॉन्ट आकार कैसे स्केलिंग करता है, देखें:

इंस्टांस

<h1 style="font-size:10vw">Hello World</h1>

अपने आप से प्रयास करें

व्यूपॉर्ट (Viewport) ब्राउज़र विंडो का आकार है। 1vw = व्यूपॉर्ट आकार का 1%。यदि व्यूपॉर्ट 50 सेंटीमीटर चौड़ा है, तो 1vw 0.5 सेंटीमीटर होगा。