CSS के Font एक बहत ही Important Concept , जिसे बहत ही अछे से समझना पड़ता हे , क्यू की इस Font के मदत से ही हम Web Page के Text Format को Design कर सकते हे |
तो आइये इस Font Properties के बारे में बिस्तार से जानने की कौसिस करते हे , और साथ में इस Font Properties को Practical में HTML Document के अन्दर Implement करके देखते हे | तो चलिए आज की (What are the CSS Font Properties in Hindi) इस आर्टिकल को शुरू करते हे |
What are the CSS Font Properties in Hindi - पूरी जानकारी
CSS में Font Properties का इस्तेमाल करके Web Page के अन्दर जो Text या Paragraph का Use किये जाते हे , उन सभी Text और Paragraph को Design किया जाता हे , जिसे वो Text attractive लगे | जेइसे - Text की Size को बड़ा या छोटा करना , Text को Color करना , या Text को Style करना ..इत्यादि ,
तो इस तरह के काम को करने के लिए ही हम इस Font Properties का इस्तेमाल करते हे |
तो आइये जानते हे CSS में कितने प्रकार के Font का इस्तेमाल किये जाते हे ,
Different Types of Font Properties : -
CSS में Font ,Text को Design करने के लिए निचे दिए गये इन सारे Font Properties का इस्तेमाल किये जाते हे , जेइसे -
- Font Family
- Font Style
- Font Size
- Font Weight
- Font Variant
1. Font Family Properties : -
Font Family के मदत से Web Page के अन्दर Use होने वाले text को Design किया जाता हे | जब हम इस Font Family का इस्तेमाल करते हे , तो Browser हमें बहत सारे Font Family Provide करते हे , और अगर उन सब Font Family में से कोई भी Font Family HTML Document में Support नही करते तो Browser के मदत से वो Automatically किसी और Font Family को add कर देते हे , क्यू की सभी Font Browser में Support नही होते |इस Font Family के अन्दर दो तरह के Font Family का इस्तेमाल किया जाता हे , जेइसे -
(i) Font Family : -
इस Font Family के मदत से किसी एक Particular Font Family का इस्तेमाल किया जाता हे , जेइसे - Arial , Verdana ..इत्यादि |मतलब मानलो , Fruits एक Font Family हे , तो उसमे बहत सारे Fruit होंगे जेइसे - Apple , Mango , Banana .etc
तो इनमे से अगर हम सिर्फ Mango को ही अपने HTML के अन्दर Use करते हे तो वो होता हे Font Family |
मतलब बहत सारे Font के Group में से जब किसी एक Particular Font को इस्तेमाल किये जाते हे , तो वो ही होता हे Font Family |
(ii) Generic Font Family :-
Generic Font Family का मतलब हे जब किसी Font के Group को ही हम HTML Document के अन्दर इस्तेमाल करते हे , जेइसे - Cursive, Fantasy, Serif ..इत्यादि |जेइसे हमने बताया था जब बहत सारे Fruits में से किसी एक Particular Fruit का इस्तेमाल करते हे तो वो होता हे Font Family , लेकिन इस Generic Family में वो पुरे Fruits को ही हम Font के अन्दर Use करते हे , और ये ही Concept को ही Generic Font Family कहा जाता हे |
Font Properties के मदत से आप एक से जादा Font का इस्तेमाल कर सकते हो , और इसमें (" ") इस Quotation का इस्तेमाल किया जाता हे ,
और Generic Font Family में भी एक से जादा Font का इस्तेमाल कर सकते हो , जिसमे (,) इस Comma का इस्तेमाल करके हम Font को अलग अलग तरह से Declare कर सकते हे |
चलिए अब इस Font Family Properties को एक Example के माध्यम से समझने की कौसिस करते हे ,
Example : -
.webp "What are the CSS Font Properties in Hindi")
2. Font Style Properties : -
इस Font Style Properties के मदत से Font को अलग अलग Style Declare कर सकते हे , जिस बजह से वो Text देखने में काफी अच्छा लगता हे |Font Style Properties में 3 तरह के Value का इस्तेमाल किया जाता हे ,
- Normal
- Italic
- Oblique
(i) Normal : - इसमें Text Normal Format में Show होता हे |
Example :
<html>
<head>
<title>Font Properties</title>
<style>
p{
font-style: normal;
}
</style>
</head>
<body>
<p>This is Normal font Style Properties</p>
</body>
</html>
<head>
<title>Font Properties</title>
<style>
p{
font-style: normal;
}
</style>
</head>
<body>
<p>This is Normal font Style Properties</p>
</body>
</html>
(ii) Italic : - इस Value के मदत से Text को Italic Format में Show किया जाता हे |
Example :
<html>
<head>
<title>Font Properties</title>
<style>
p{
font-style: italic;
}
</style>
</head>
<body>
<p>This is font Italic font Style Properties</p>
</body>
</html>
<head>
<title>Font Properties</title>
<style>
p{
font-style: italic;
}
</style>
</head>
<body>
<p>This is font Italic font Style Properties</p>
</body>
</html>
Output :- This is font Italic font Style Properties
(iii) Oblique :- इस Oblique Font Style के मदत से वो Text बाकि Text के तुलना में थोड़ा अलग नजर आयेगा |
Example :
<html>
<head>
<title>Font Properties</title>
<style>
p{
font-style: oblique;
}
</style>
</head>
<body>
<p>This is font Oblique font Style Properties</p>
</body>
</html>
<head>
<title>Font Properties</title>
<style>
p{
font-style: oblique;
}
</style>
</head>
<body>
<p>This is font Oblique font Style Properties</p>
</body>
</html>
3. Font Size Properties : -
इस Font Size Properties के मदत से Web Page के अन्दर जो भी Text या Paragraph का इस्तेमाल किये जाते हे , उन सभी Text या Paragraph में Font Size Declare कर सकते हे |जेइसे -
x-small , xx-small , small , medium , large , x-large , xx-large , smaller , larger , pixel , percentage (%) ..इत्यादि |
Font Size Properties के मदत से इन सभी value का इस्तेमाल किया जाता हे |
Example : -
<html>
<head>
<title>Font Properties</title>
<style>
p{
font-size: xx-large;
}
</style>
</head>
<body>
<p>This is font size Properties</p>
</body>
</html>
Output :-
This is font size Properties
Example : -
<html>
<head>
<title>Font Properties</title>
<style>
p{
font-weight: bold;
}
</style>
</head>
<body>
<p>This is font weight Properties</p>
</body>
</html>
Output :-
4. Font Weight Properties :-
इस Properties के मदत से Font के Boldness को Control किया जाता हे , मतलब , वो Text को कितना Bold किया जायेगा , वो इस Font Weight की मदत से ही Declare किये जाते हे | और वो Text के अन्दर Normal , Bold , Bolder , Lighter इन सभी Value का इस्तेमाल किये जाते हे , इनके अलाबा Pixel की मदत से भी Custom Weight को Declare किया जा सकता हे | जेइसे - 100, 200, 400, 700 ,900... etc .Example : -
<html>
<head>
<title>Font Properties</title>
<style>
p{
font-weight: bold;
}
</style>
</head>
<body>
<p>This is font weight Properties</p>
</body>
</html>
Output :-
This is font weight Properties
5. Font Variant Properties :-
इस Font Variant Properties के मदत से Text या Paragraph को Normal और Upper Case में Convert किया जाता हे | और इसमें दो Value होते हे , जेइसे -- Normal : - इस Normal Value में Font Normal रहता हे |
- Small-caps:- Small caps का इस्तेमाल करने से ये Font बाकि के Fonts के तूलना में छोटा हो जाता हे , और Font Uppercase में Convert हो जाते हे
.webp "What are the CSS Font Properties in Hindi")
Shorthand Font Properties : -
इस Shorthand Properties के मदत से इन सारे Font Properties को हम HTML Document में एक साथ Declare कर सकते हे |जेइसे -
<html>
<head>
<title>Font Properties</title>
<style>
p{
font :italic small-caps bold 25px serif;
}
</style>
</head>
<body>
<p>This is font Shorthand Properties</p>
</body>
</html>
<head>
<title>Font Properties</title>
<style>
p{
font :italic small-caps bold 25px serif;
}
</style>
</head>
<body>
<p>This is font Shorthand Properties</p>
</body>
</html>
Output :-
.webp "What are the CSS Font Properties in Hindi")
Related Post :-
What is CSS in Hindi
तो उम्मीद करता हु आप लोगो ये (What are the CSS Font Properties in Hindi) आर्टिकल पसंद आया होगा , अगर पसंद आया हे तो अपने दोस्तों के साथ शेयर जरुर करे और अगर इस आर्टिकल के अंदर दिए गये जानकारी से किसी भी तरह के कोई भी Doubt रह गये तो निचे Comment करके भी पूछ सकते हो |
धन्यवाद ....
Conclusion :-
हमने आज की इस आर्टिकल के अन्दर CSS के Font Properties के बारे में पूरी जानकारी आप लोगो के साथ शेयर की हे , और साथ में Practical के अन्दर करके भी दिखाया हे ,तो उम्मीद करता हु आप लोगो ये (What are the CSS Font Properties in Hindi) आर्टिकल पसंद आया होगा , अगर पसंद आया हे तो अपने दोस्तों के साथ शेयर जरुर करे और अगर इस आर्टिकल के अंदर दिए गये जानकारी से किसी भी तरह के कोई भी Doubt रह गये तो निचे Comment करके भी पूछ सकते हो |
धन्यवाद ....
.webp)
.webp)
.webp)
.webp)
.webp)
