 |
| HTML and CSS tutorial for beginners in Hindi |
हेलो फ्रेंड्स, KTL के HTML और CSS tutorial में फिर स्वागत है। आज हम लेसन २५ सीखेंगे।
पिछले लेसन में हम ने CSS text properties सीखी है।
आज हम CSS font properties सीखेंगे।
CSS font properties
This sentence is displayed in Arial font.
This sentence is displayed in Times font.
This sentence is displayed in Courier font.
This sentence is in Georgia font.
This sentence is in Verdana font.
फॉण्ट की विशिष्ट स्टाइल, लेटर्स के साइज, थिकनेस वगैरह होती है। हम को ऊपर दिखाए हुए फ़ॉन्ट्स मालूम है। इस के अलावा कई फ़ॉन्ट्स होते हैं।
हम यह देखेंगे की CSS में font की कौनसी properties होती है और वह क्या करती है। CSS में यह फॉण्ट प्रॉपर्टीज होती है - font family, font size, font style, font variant, font weight. हम आज इन प्रॉपर्टीज को एक एक करके सीखेंगे।
१. Font family:
यह प्रॉपर्टी जिस font में टेक्स्ट डिस्प्ले करने का है उस फॉण्ट का नाम देने के लिए होती है। Font family names दो तरह के होते हैं - १. Generic family और २. Font family. Generic family name एक group होता है जिसमे एक जैसी अनेक font families होती है। Font family उस group में का एक specific font family होती है। हम इसे समझ लेंगे। डिस्प्ले करने के तरीके के अनुसार ५ font families होती है। वह इस प्रकार है।१. Serif:
इस font family में characters के end में एक छोटी लाइन होती है। जैसे Times New Roman का A अक्षर। इस के नीचे डिस्प्ले की गयी छोटी लाइन्स देखिये। तो Times New Roman की generic font family है Serif।२. Sans-serif:
इस में characters में कोई लाइन नहीं होती है। Arial font का A। तो Arial Sans-serif में आती है।३. Cursive:
अंग्रेजी अक्षर जोड के लिखते हैं तो उनको cursive कहते हैं। इसे running writing भी कहते हैं। यह अपने handwriting जैसे होता है। Brush Script MT, Edwardian Script ITC वगैरह इसके उदाहरण है। |
| आकृति २५-१ Font families |
४. Monospace:
इसमें सब characters का एक ही size होता है। दूसरे फॉण्ट फैमिलीज में अलग अलग साइज होता है, जैसे O और o, A और a। Courier New and Lucida Console फ़ॉन्ट्स इस जेनेरिक फॅमिली में आते हैं।
५. Fantasy:
इस में decorative font families आती है, जैसे impact, Stencil वगैरह।हम Notepad, MS-Office वगैरह में बहुत सारे फोंट्स देखते हैं।
हमारे स्क्रिप्ट में यह प्रॉपर्टी लिखते हैं। एक नयी Notepad फाइल ओपन कीजिये। इस में lesson-24 का टेक्स्ट कॉपी कीजिये।
Font family property को इस तरह से लिखते हैं।
#para1 {
font-family: "Times New Roman", Times, serif;
}
याद रखिये:
१. अगर फॉण्ट फॅमिली के नाम में एक से ज्यादा शब्द होते हैं तो उस नाम को quotation marks मे ("font name") लिखा जाता है।
२. हम font-family प्रॉपर्टी में एक से ज्यादा फ़ॉन्ट्स के नाम लिख सकते हैं। इस लिस्ट में पहला नाम उस फॉण्ट का देते हैं जो हम डिस्प्ले करना चाहते हैं। आखरी नाम फॅमिली का generic नाम लिखते हैं। इससे अगर browser हम ने दिया हुआ फॉण्ट नहीं दिखा सकता है तो generic फॅमिली में से कोई भी फॉण्ट दिखायेगा।
अब हमारे स्क्रिप्ट में चलिए। उसमें #para1 में लिखये
font-family: "Arial", Sans-serif;
और #para3 के लिए लिखिए -
font-family: "Edwardian Script ITC", Cursive;
इस स्टाइल में से
text-transform: uppercase
डिलीट कीजिये।
इस फाइल को "Lesson-25" और "Lesson-25.html" के नाम से save कीजिये और आउटपुट देखिये। हमने दिए हुए फोंट्स आये हैं।
२. Font size:
यह property फॉण्ट साइज के लिए होती है। अगर हम कुछ भी value नहीं देते हैं तो फॉण्ट साइज होती है 16 pixels। यह default होती है। हम फॉण्ट साइज absolute measurements में दे सकते हैं या relative measurements में दे सकते हैं। हमारे स्क्रिप्ट में फॉण्ट साइज चेंज करेंगे।#para3 {
font-family: "Script MT", Cursive;
font-size: 2vw;
}
इस कोड को #para3 में कॉपी कीजिये। फिर से Lesson-25 और "Lesson-25.html" के नाम से save कीजिये। नीचे दी हुई figures देखिये। आउटपुट देखिये।
३. Font style:
इस की तीन values होती है - normal, italic, and oblique। हमारे heading को italic करेंगे। Header के style में लिखिए -
font-style: italic;
इसे Lesson-25 और "Lesson-25.html" के नाम से save कीजिये और आउटपुट देखिये।
4. Font variant:
इस property से हम टेक्स्ट को छोटे capital letters में लिख सकते हैं। इस की normal और small-caps दो values होती है।5. Font weight:
इस का उपयोग फॉण्ट को bold करने के लिए होता है। इस property की दो values होती है - normal और bold। नीचे दिया हुआ कोड हमारे प्रोग्राम के #para1 में इन्सर्ट कीजिये।font-weight: bold;
Source कोड की PDF फाइल देखने के लिए आकृति २५-२. पर क्लिक कीजिये। हमारे फाइल को Lesson-25 और "Lesson-25.html" के नाम से save कीजिये।
 |
| आकृती २५-२ CSS font properties |
अब HTML document पर डबल क्लिक कीजिये। आउटपुट देखिये। हमने दी हुई font properties डिस्प्ले हुई है। यह आउटपुट नए वेब पेज में देखने के लिए आकृति २५-३ पर क्लिक कीजिये।
 |
| आकृती २५-३ Output of CSS font properties |
Important points:
१. Font family property का उपयोग फॉण्ट का नाम देने के लिए होता है।
२. Font size जो टेक्स्ट डिस्प्ले करनेवाले हैं उसका साइज बताता है।
३. Font style का उपयोग टेक्स्ट को italic या oblique डिस्प्ले करने के लिए होता है।
४. Font variant से टेक्स्ट को small-caps में डिस्प्ले कर सकते हैं।
५. Font weight का उपयोग टेक्स्ट को bold करने के लिए होता है।
लेसन २४ लेसन २६
