हेल्लो दोस्तों! आपको CSS के बारे में पीछे बताया जा चुका है आज इस पोस्ट में आपको Stying Fonts in CSS in Hindi के बारे में बताया जा रहा है तो चलिए शुरू करते है
Contents
Introduction to CSS font Properties
CSS के द्वारा आप font(Stying Fonts in CSS in Hindi) की size ,style ,weight ,line-height आदि को change कर सकते है इन सभी को change करने के लिए अलग से एक property बनायीं जाती है
इन property के बारे में निचे दिया जा रहा है
Font-Family property
किसी भी html element या tag के font की family को set करने के लिए आपको font-family property की value के रूप में आप font का name देते है
निचे कुछ font के name दिए गए है जिनका प्रयोग करके आप value के रूप में कर सकते है
- Times New Roman
- Verdana
- Arial
- courier
- serif
और भी font-family होते है इन सभी को आप font की value को define कर सकते है
इसे हम अक example से समझ सकते है
<html>
<head>
<title>font-family property</title>
<style>
h2{
font-family:Arial;
}
</style>
<head>
<body>
<h2>font-family example heading</h2>
</body>
</html>Font-Style property
CSS की मदद से आप font style change कर सकते है इसके लिए आप font-style property का प्रयोग करते है इस property की value normal,italic और oblique हो सकता है
इस property example निचे दिया गया है
<html>
<head>
<title>font-style property</title>
<style>
h2{
font-style:italic;
}
</style>
<head>
<body>
<h2>font-style example heading</h2>
</body>
</html>font-Variant property
इस property की मदद से आप font variant define कर सकते है इस property की मदद से आप font को capital letter में show कर सकते है इस property की value normal और small-caps हो सकते है
<html>
<head>
<title>font-variant property</title>
<style>
h2{
font-variant:small-caps;
}
</style>
<head>
<body>
<h2>font-variant example heading</h2>
</body>
</html>font-weight property
इस property से आप font का weight define कर सकते है ये property define करते है की font कितना bold होगा इस property की value bold ,bolder और lighter हो सकता है आप कोई कस्टम font-weight भी define कर सकते है
इसका example निचे दिया गया है
<html>
<head>
<title>font-weight property</title>
<style>
p{
font-weight:bold;
}
</style>
<head>
<body>
<p>font-weight example heading</p>
</body>
</html>font-size property
इस property के द्वारा आप किसी भी html element के font का size change कर सकते है इस property की value आप pixels भी दे सकते है यहाँ तक की आप pixel के स्थान पर आप % का भी प्रयोग किया जा सकता है
इन सभी का example निचे दिया जा रहा है
<html>
<head>
<title>font-size property</title>
<style>
h2{
font-size:15px;
}
</style>
<head>
<body>
<h2>font-size example heading</h2>
</body>
</html>font-size-adjust property
इस property के द्वारा आप font की size को adjust कर सकते है जब आप इस property को define कर सकते है तो आप चाहे तो font-family कोई भी ब्राउज़र font की height को ऑटोमेटिकली(automatically) adjust कर देता है
इसका example निचे दिया जा रहा है
<html>
<head>
<title>font-size-adjust property</title>
<style>
p{
font-size-adjust:0.44;
font-family:vendana;
font-size:adjust:0.44;
}
</style>
<head>
<body>
<h2>font-family example heading</h2>
</body>
</html>font-stretch property
इस property के द्वारा आप font को stretch कर सकते है इस property की value normal,wider,narrower और condensed आदि हो सकता है अब इस property को कोई भी ब्राउज़र support नहीं करता है
हम इसे एक example से समझ सकते है
<html>
<head>
<title>font-family property</title>
<style>
#p1{
font-stretch:wider;
}
</style><head>
<body>
<h2>font-stretch example heading</h2>
<p id=”p1”>this is the font-stretch </p>
</body>
</html>
Stying Fonts in CSS in Hindi
reference-https://developer.mozilla.org/en-US/docs/Web/CSS/font
निवेदन :-अगर आपको यह आर्टिकल उपयोगी लगा हो तो इस आप अपने क्लासमेट ,दोस्तों के साथ अवश्य share कीजिये और आपके जो भी इस पोस्ट्स से related(सम्बन्धित) questions है तो आप उन्हें निचे कमेंट कर सकते है हम उसके answer अवश्य करेंगे Thank