Styling Fonts
Introduction to CSS Font Properties
CSS के द्वारा आप fonts की size, style, weight, line-height आदि को change कर सकते है। इन सभी changes के लिए अलग से एक एक property बनायीं गई है। आइये इन properties के बारे में जानते है।
font-family Property
किसी भी HTML element के font की family set करने के लिए आप font-family property को यूज़ करते है। इस property की value के रूप में आप किसी भी font family का नाम देते है। निचे कुछ font families की list दी जा रही है जिन्हें आप value के रूप में इस्तेमाल कर सकते है।
- Times New Roman
- Verdana
- Arial
- Courier
- serif
आइये font family property को एक उदाहरण से समझने का प्रयास करते है।
<html>
<head>
<title>Font Family Property Demo</title>
<style>
p
{
font-family:Arial;
}
</style>
</head>
<body>
<h1>Font Family Example</h1>
<p>This font will be shown in Arial. </p>
</body>
</html>
ऊपर दिया गया code निचे दिया गया output generate करता है।
font-style Property
CSS की मदद से font style change करने के लिए आप font-style property यूज़ करते है। इस property की values normal, italic और oblique हो सकती हैं। इसका उदाहरण निचे दिया जा रहा है।
<html>
<head>
<title>Font style Property Demo </title>
<style>
h1
{
font-style:italic;
}
</style>
</head>
<body>
<h1>This heading will be in italic</h1>
<p>This is an example of font style property and this is a paragraph</p>
</body>
</html>
ऊपर दिया गया code निचे दिया गया output generate करता है।
font-variant Property
इस property की मदद से आप font के variants define कर सकते है। इस property की मदद से आप fonts को capital letters में show कर सकते है। इस property की values normal और small-caps हो सकती है। इसका उदाहरण निचे दिया गया है।
<html>
<head>
<title>font variant property example</title>
<style>
p
{
font-variant:small-caps;
}
</style>
</head>
<body>
<p> This paragraph will be in capital letters. This is an example of font-variant</p>
</body>
<html>
ऊपर दिया गया code निचे दिया गया output generate करता है।
font-weight Property
इस property से आप font का weight define कर सकते है। ये property define करती है की font कितना bold होगा। इस property की values bold, bolder और lighter हो सकती है। आप कोई custom font weight भी define कर सकते है। इसका उदाहरण आगे दिया गया है।
<html>
<head>
<title>font-weight property</title>
<style>
p
{
font-weight:bold;
}
</style>
</head>
<body>
<p>This is an example of font weight</p>
</body>
</html>
ऊपर दिया गया code निचे दिया गया output generate करता है।
font-size Property
इस property के द्वारा आप किसी भी HTML element के font का size change कर सकते है। इस property की value आप pixels में भी दे सकते है और % में भी दे सकते है। इसका उदाहरण निचे दिया जा रहा है।
<html>
<head>
<title>font size property demo </title>
<style>
h1
{
font-size:20px;
}
p
{
font-size:12px;
}
</style>
</head>
<body>
<h1> This is heading</h1>
<p>This is a paragraph</h1>
</body>
</html>
ऊपर दिया गया code निचे दिया गया output generate करता है।
font-size-adjust Property
इस property के द्वारा आप font की size को adjust कर सकते हैं। जब आप इस property को define करते है तो फिर चाहे font family कोई भी हो, browser font की height को automatically adjust कर देता है। इसका उदाहरण निचे दिया जा रहा है।
<html>
<head>
<title>font size adjust property demo</title>
<style>
p
{
font-size-adjust:0.58;
}
#p1
{
font-family:Verdana;
font-size-adjust:0.58;
}
</style>
</head>
<body>
<p> This is a paragraph </p>
<p id="p1">This is another paragraph</p>
</body>
</html>
font-stretch Property
इस property के द्वारा आप font को stretch कर सकते है। इस property की value normal, wider, narrower और condensed आदि हो सकती है। अब इस property को कोई भी browser support नहीं करता है। आइये इसे एक उदाहरण से समझने का प्रयास करते है।
<html>
<head>
<title>font stretch property demo</title>
<style>
#p1
{
font-stretch:wider;
}
</style>
</head>
<body>
<p>This is a paragraph.</p>
<p id="p1">This is a paragraph.</p>
</body>
</html>
ऊपर दिया गया code निचे दिया गया output generate करता है।
