CSS फ़ॉन्ट

पिछला पृष्ठ CSS पाठ
अगला पृष्ठ CSS सूची

CSS फ़ॉन्ट प्रकृति, आकार, बोल्ड, शैली (जैसे इटलिक) और रूपांतर (जैसे कॉपीबैटर शैली) वर्णन करता है।

CSS फ़ॉन्ट सीरीज

CSS में, दो तरह के फ़ॉन्ट परिवार के नाम हैं:

सामान्य फ़ॉन्ट परिवार - समान दिखावा वाले फ़ॉन्ट परिवार (जैसे "Serif" या "Monospace")
विशिष्ट फ़ॉन्ट परिवार - विशेष फ़ॉन्ट परिवार (जैसे "Times" या "Courier")

विभिन्न विशिष्ट फ़ॉन्ट परिवारों के अतिरिक्त, CSS में 5 तरह के सामान्य फ़ॉन्ट परिवार निर्धारित किए गए हैं:

Serif फ़ॉन्ट
Sans-serif फ़ॉन्ट
Monospace फ़ॉन्ट
Cursive फ़ॉन्ट
Fantasy फ़ॉन्ट

यदि आपको फ़ॉन्ट परिवार के बारे में अधिक जानकारी होने की ज़रूरत है, तो पढ़ें CSS फ़ॉन्ट सीरीज.

निर्दिष्ट फ़ॉन्ट परिवार

इसे उपयोग करके font-family एट्रिब्यूट पाठ के फ़ॉन्ट परिवार को परिभाषित करना

सामान्य फ़ॉन्ट परिवार का उपयोग

यदि आप दस्तावेज़ को sans-serif फ़ॉन्ट का उपयोग करना चाहते हैं, लेकिन आपको कौन सा फ़ॉन्ट होना चाहिए इसे पता नहीं है, तो नीचे दिए गए घोषणा एक उपयुक्त घोषणा है:

body {font-family: sans-serif;}

स्वयं को प्रयास करें

इस तरह, यूज़र एजेंट sans-serif फ़ॉन्ट परिवार से एक फ़ॉन्ट (जैसे Helvetica) चुनेगा और इसे body एलीमेंट पर लागू करेगा। इसके कारण इस फ़ॉन्ट चयन को body एलीमेंट में शामिल सभी एलीमेंट पर भी लागू किया जाएगा, जब तक कि कोई और विशिष्ट चयनकर्ता इसे ओवरराइड नहीं करे।

निर्दिष्ट फ़ॉन्ट परिवार

सामान्य फ़ॉन्ट परिवार का उपयोग करने के अतिरिक्त, आप font-family एट्रिब्यूट के द्वारा अधिक विशिष्ट फ़ॉन्ट को निर्दिष्ट कर सकते हैं।

नीचे दिए गए उदाहरण में सभी h1 एलीमेंट को Georgia फ़ॉन्ट निर्दिष्ट किया गया है:

h1 {font-family: Georgia;}

स्वयं को प्रयास करें

इस नियम को चलाने से एक और समस्या उभर सकती है, यदि यूज़र एजेंट पर Georgia फ़ॉन्ट नहीं इंस्टॉल करता है, तो h1 एलीमेंट को दिखाने के लिए यूज़र एजेंट के डिफ़ॉल्ट फ़ॉन्ट का उपयोग कर सकता है।

हम इस समस्या को हल करने के लिए विशेष फ़ॉन्ट नाम और सामान्य फ़ॉन्ट परिवार को जोड़कर सकते हैं:

h1 {font-family: Georgia, serif;}

स्वयं को प्रयास करें

यदि पाठक Georgia को नहीं इंस्टॉल करता है, लेकिन Times फ़ॉन्ट (सरिफ फ़ॉन्ट परिवार के एक फ़ॉन्ट) को इंस्टॉल करता है, तो यूज़र एजेंट पॉप एलीमेंट के लिए Times का उपयोग कर सकता है। हालांकि Times और Georgia पूरी तरह से मेल नहीं खाते, लेकिन कम से कम इससे पास है।

इसलिए, हम सभी font-family नियमों में एक सामान्य फ़ॉन्ट परिवार को देने की सिफारिश करते हैं। इससे एक बाकी रास्ता मुहैया होता है, जब यूज़र एजेंट नियम के साथ मेल खाने वाले विशेष फ़ॉन्ट को नहीं दे पाता है, तो उसे एक प्रत्याशी फ़ॉन्ट को चुन सकता है।

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

p {font-family: Times, TimesNR, 'New Century Schoolbook',}}
     Georgia, 'New York', serif;}

स्वयं को प्रयास करें

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

टिकटा का इस्तेमाल

आप शायद नज़र आया होगा कि ऊपरी उदाहरण में एक टिकटा का इस्तेमाल किया गया है। केवल जब फ़ॉन्ट नाम में एक या अधिक जगह है (जैसे New York) या जब फ़ॉन्ट नाम में # या $ जैसे प्रतीक है, तभी font-family घोषणा में टिकटा का इस्तेमाल करना चाहिए।

एक टिकटा या दो टिकटाओं को स्वीकार किया जा सकता है। लेकिन, यदि font-family अभियान को HTML के style अभियान में रखा जाता है, तो उस अभियान को नहीं इस्तेमाल किए गए टिकटा का इस्तेमाल करना चाहिए:

<p style="font-family: Times, TimesNR, 'New Century Schoolbook', Georgia,</p>
 'New York', serif;">...</p>

स्वयं को प्रयास करें

फ़ॉन्ट शैली

font-style अभियानअधिकतर इस्तेमाल की जाती है जिससे स्लाइड लेख को निर्धारित करने के लिए।

इस अभियान के तीन मूल्य हैं:

normal - लेख को सामान्य देखाया जाता है
italic - लेख को झुकाव देखाया जाता है
oblique - लेख को झुकाव देखाया जाता है

उदाहरण

p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

स्वयं को प्रयास करें

italic और oblique के अंतर

font-style बहुत ही सरल है: यह नोर्मल लेख, italic लेख और oblique लेख के बीच चयन करने के लिए इस्तेमाल किया जाता है। एकमात्र कुछ जटिल है इसका italic लेख और oblique लेख के बीच अंतर का स्पष्टीकरण।

स्लाइड (italic) एक साधारण फ़ॉन्ट शैली है, जो प्रत्येक अक्षर की संरचना में थोड़ा बदलाव करके परिवर्तित दिखाई देती है। इससे भिन्न, झुकाव (oblique) लेख सामान्य खड़े लेख का झुकाव दिखाता है।

सामान्यतया, italic और oblique लेख वेब ब्राउज़र में पूरी तरह से एक से एक समझे जाते हैं।

फ़ॉन्ट रूपांतर

font-variant अभियानसूक्ष्म-बड़े अक्षर सेट कर सकते हैं।

सूक्ष्म-बड़े अक्षर आम बड़े अक्षर नहीं हैं, न ही छोटे अक्षर, इस तरह के अक्षर विभिन्न आकार के बड़े अक्षरों का इस्तेमाल करते हैं।

उदाहरण

p {font-variant:small-caps;}

स्वयं को प्रयास करें

फ़ॉन्ट बोल्डनेस

font-weight गुणलेख का बोल्डनेस सेट करें

bold शब्द का उपयोग करके लेख को बोल्ड किया जा सकता है

शब्द 100 ~ 900, फ़ॉन्ट को 9 अधिकारिता स्तरों का निर्दिष्ट करते हैं। यदि एक फ़ॉन्ट में इन अधिकारिता स्तरों के अंतर्गत फ़ॉन्ट निहित है, तो इन संख्याओं को पूर्वनिर्धारित स्तरों से मेल खाते हैं, 100 सबसे कम फ़ॉन्ट रूपांतरण के लिए, 900 सबसे अधिक फ़ॉन्ट रूपांतरण के लिए। संख्या 400 के बराबर normal है, और 700 के बराबर bold है

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

उदाहरण

p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}

स्वयं को प्रयास करें

फ़ॉन्ट आकार

font-size गुणलेख का आकार सेट करें

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

हमेशा सही HTML शीर्षक का उपयोग करें, जैसे कि <h1> - <h6> को शीर्षक के रूप में इस्तेमाल करें, <p> को पैराग्राफ के रूप में इस्तेमाल करें

font-size मान आबादीय या सापेक्षिक हो सकते हैं

सापेक्षिक मान:

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

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

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

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

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

पिक्सेल के द्वारा लेख आकार सेट करने से, लेख आकार पर पूर्ण नियंत्रण किया जा सकता है:

उदाहरण

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

स्वयं को प्रयास करें

फायरफॉक्स, क्रोम और सैफारी में, उपरोक्त उदाहरण के लेख आकार को दोबारा समायोजित किया जा सकता है, लेकिन इंटरनेट ईक्सप्लोरर में नहीं।

भले ही ब्राउज़र के जगहां से लेख आकार को समायोजित किया जा सकता है, लेकिन यह वास्तव में पूरे पृष्ठ को समायोजित करता है, न केवल लेख को।

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

अगर इंटरनेट ईक्सप्लोरर में लेख आकार को समायोजित न कर सकने की समस्या से बचना है, तो कई डेवलपर्स ईम इकाई का उपयोग करते हैं।

W3C इस्तेमाल करने के लिए em इकाई अनुशंसा करता है।

1em वर्तमान फ़ॉन्ट आकार के बराबर है। यदि एक एलीमेंट का font-size 16 पिक्सल है, तो उस एलीमेंट के लिए 1em 16 पिक्सल है। फ़ॉन्ट आकार को सेट करते समय, em का मान पालिड एलीमेंट के फ़ॉन्ट आकार के आधार पर बदलता है।

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

इस फॉर्मूला का उपयोग करके पिक्सल को em में बदला जा सकता है:पिक्सल्स/16=em

（नोट: 16 पालिड एलीमेंट के डिफ़ॉल्ट फ़ॉन्ट आकार के बराबर है, यदि पालिड एलीमेंट का font-size 20px हो, तो सूत्र को बदलना चाहिए:पिक्सल्स/20=em）

उदाहरण

h1 {font-size:3.75em;} /* 60px/16=3.75em */
h2 {font-size:2.5em;}  /* 40px/16=2.5em */
p {font-size:0.875em;} /* 14px/16=0.875em */

स्वयं को प्रयास करें

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

दुर्भाग्य से IE में अभी भी समस्या है। टेक्स्ट आकार को पुनर्निर्धारित करते समय, यह सामान्य आकार से बड़ा या छोटा हो सकता है।

प्रतिशत और em का संयोजन

सभी ब्राउज़रों में वैध योजना यह है कि body एलीमेंट (पालिड एलीमेंट) को प्रतिशत में डिफ़ॉल्ट font-size मान सेट करना है:

उदाहरण

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

स्वयं को प्रयास करें

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