CSS Font Property (In Hindi)
CSS Font Property का उपयोग Fonts की Look को नियंत्रित करने के लिए किया जाता हैं। Font Property और Text Property दोनों Properties Content की Visual Appearance को Control करती हैं।
CSS Font Property से आप Font Color, Size, Weight आदि की Setting कर सकते हैं। और Fonts को Responsive भी बना सकते हैं।
Different Types of 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 (,) द्वारा अलग किया जाता हैं।
p{font-family:"Times New Roman", Serif;}
Font-Style Property
Font-Style Property का प्रयोग Fonts की Style Declare करने के लिए किया जाता हैं। यानि Fonts को किस प्रकार देखना चाहते हैं। इसके द्वारा अधिकतर Fonts को Italic करने के लिए किया जाता हैं। इसकी तीन संभावित 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>
OUTPUT-
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;”>
</html>
This Paragraph Text Variant is Normal.
</p>
<p style=”font-variant:small-caps;”>
This Paragraph Text Variant is Small Caps.
</p>
</body>
OUTPUT-
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>
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>
Font Property
इस Property का प्रयोग Short hand Declaration के लिए किया जाता हैं। एक साथ सभी Font Properties को Declare कर सकते हैं।
p {font:italic small-caps bold 15px Serif;}
For Any Doubt Clear on Telegram Discussion Group
No comments:
Post a Comment