इस Tutorial में हम आपको CSS Font Property की पूरी जानकारी देंगे. अध्ययन की सुविधा के लिए हमने इस Tutorial को कई भागों में बांटा हैं.
Table of Content
CSS Font Property का परिचय
CSS Font Property का उपयोग Fonts की Look को नियंत्रित करने के लिए किया जाता हैं. Font Property और Text Property दोनों Properties Content की Visual Appearance को Control करती हैं.
CSS Font Property से आप Font Color, Size, Weight आदि की Setting कर सकते हैं. और Fonts को Responsive भी बना सकते हैं.
विभिन्न प्रकार की Font Properties
Fonts को Customize करने के लिए CSS बहुत सारी भिन्न-भिन्न Font Properties Provide कराती हैं. जिनके बारे में नीचे बताया जा रहा हैं.
font-family Property
इस Property का इस्तेमाल किसी भी HTML Element की Font Family Declare करने के लिए किया जाता हैं.
CSS में दो प्रकार की Font Family होती हैं:
- Generic Font Family – इस Font Family में एक समान दिखने वाले Font Families के Groups शामिल होते हैं.
- Font Family – इसमें सिर्फ एक Particular Font Family होती हैं.
font-family Property द्वारा आप एक से ज्यादा Font Families Declare कर सकते हैं. ऐसा Browsers के कारण किया जाता हैं, क्योंकि सभी ब्राउजर सभी फॉन्टों को Support नही करते हैं.
अगर फॉन्ट नाम में एक से ज्यादा शब्द हैं तो, उसे Quotation Marks (“”) के भीतर लिखा जाता हैं. जैसे; “Times New Roman”. एक से ज्यादा Font Families को Comma (,) द्वारा अलग किया जाता हैं.
font-family: “Times New Roman”, Serif;
}
font-style Property
font-style Property का इस्तेमाल Fonts की Style Declare करने के लिए किया जाता हैं. यानि आप Fonts को किस प्रकार देखना चाहते हैं. इसके द्वारा अधिकतर Fonts को Italicize करने के लिए किया जाता हैं. इसकी तीन संभावित Values होती हैं.
- normal
- italic
- oblique
<html>
<head>
<title>CSS Font Style Property</title></head>
<body><p style=”font-style:normal;”>
This Paragraph Text is Normal.
</p>
<p style=”font-style:italic;”>
This Paragraph Text is Italic.
</p>
<p style=”font-style:oblique;”>
This Paragraph Text is Oblique.
</p>
</body>
</html>
ऊपर दिया कोड इस प्रकार का परिणाम देगा.
This Paragraph Text is Normal.
This Paragraph Text is Italic.
This Paragraph Text is Oblique.
font-variant Property
इस Property द्वारा Fonts के Variant को Declare किया जाता हैं. इसकी दो संभावित Values होती हैं:
- normal – इसमें Font Normal होता हैं.
- small-caps – इसमें Fonts का आकार अन्य Fonts की तुलना में छोटा हो जाता हैं और Fonts Uppercase में Convert हो जाते हैं.
<html>
<head>
<title>CSS Font Variant Property</title></head>
<body><p style=”font-variant:normal;”>
This Paragraph Text Variant is Normal.
</p>
<p style=”font-variant:small-caps;”>
This Paragraph Text Variant is Small Caps.
</p>
</body>
</html>
ऊपर दिया कोड इस प्रकार का परिणाम देगा.
This Paragraph Text Variant is Normal.
This Paragraph Text Variant is Small Caps.
font-weight Property
इस Font Property का इस्तेमाल Fonts का Weight Declare करने के लिए किया जाता हैं. यानि आपका फॉन्ट कितना Bold होगा.
इसकी bold, bolder और lighter संभावित Values होती हैं. इसके अलावा आप Custom Weight भी Declare कर सकते हैं. जैसे, 100, 300, 500, 700 आदि.
<html>
<head>
<title>CSS Font Weight Property</title></head>
<body><p style=”font-weight:normal;”>
This Paragraph Text Weight is Normal.
</p>
<p style=”font-weight:bold;”>
This Paragraph Text Weight is Bold.
</p>
</body>
</html>
ऊपर दिया कोड इस प्रकार का परिणाम देगा.
This Paragraph Text Weight is Normal.
This Paragraph Text Weight is Bold.
font-size Property
इस Property का इस्तेमाल Font Size को Control करने के लिए किया जाता हैं. इसकी संभावित Value xx-small, x-small, small, smaller, medium, large, larger, x-large, xx-large, in Pixels, in % हो सकती हैं.
<html>
<head>
<title>CSS Font Size Property</title></head>
<body><p style=”font-size:small;”>
This Paragraph Text Variant Size is Small.
</p>
<p style=”font-size:large;”>
This Paragraph Text Size is Large.
</p>
</body>
</html>
ऊपर दिया कोड इस प्रकार का परिणाम देगा.
This Paragraph Text Size is Small.
This Paragraph Text Size is Large.
font Property
इस Property का इस्तेमाल Shorthand Declaration के लिए किया जाता हैं. आप एक साथ सभी Font Properties को Declare कर सकते हैं.
font:italic small-caps bold 15px Serif;
}
आपने क्या सीखा?
इस Tutorial में हमने आपको CSS Font Property के बारे में जानकारी दी हैं. हमे उम्मीद हैं कि यह Tutorial आपके लिए उपयोगी साबित होगा.
#BeDigital
Prashant says
This is good subject
Please give a next proparty
Zoom in and zoom out on mouse hover
Thank you sir
TP Staff says
प्रशांत जी, आपके सुझाव के लिए धन्यवाद. हम जल्द ही आपको इसके बारे में जानकारी उपलब्ध करवायेंग़े.