Introduction of CSS Font Property
इस लेख मे हम CSS Font Property के बारे मे जानेंगे। जब हम HTML मे paragraph या headings को लिखते है तो वहा default font show होता है। यह HTML की by default properties है जिसको हम css का use करके change कर सकते है।
CSS की font properties से आप Font का color, size, weight आदि को change कर सकते है।
CSS font-family properties
Text के font को specify करने के लिए font-family property का इस्तेमाल किया जाता है।
CSS मे generally दो प्रकार की font family होती है।
- Generic Font Family – इसमे same यानि एक समान दिखने वाले font-families के groups शामिल होते है। यह लगभग सारे सिस्टम मे available होते है।
- specific Font Family – इसमे एक particular font-family होती है जो पहले से system मे उपलब्ध नहीं होती है इसे दूसरे source से install किया जाता है।
इस properties के द्वारा एक से ज्यादा font families को declare कर सकते है। ऐसा इसलिए किया जाता है की browser सभी fonts को support नहीं करते है।
उदाहरण
<html>
<head>
<style>
.p1 {
font-family: "Times New Roman", Times, serif;
}
.p2 {
font-family: "Lucida Console", "Courier New", monospace;
}
</style>
</head>
<body>
<h1>CSS font-family</h1>
<p class="p1">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="p2">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>अगर browser पहले font को support नहीं करता है तो दूसरा font apply होगा। इसलिए हम एक से ज्यादा font-family properties का इस्तेमाल करते है।
font-style property
Font की style को declare करने के लिए इस properties का इस्तेमाल किया जाता है।
इस property की तीन वैल्यू होती है।
- normal
- italic
- oblique
उदाहरण
<html>
<head>
<style>
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
</style>
</head>
<body>
<p class="normal">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="italic">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="oblique">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>Font Weight property
font के weight को define करने के लिए इस properties का इस्तेमाल किया जाता है।
इसकी value 100-900 होती है। इसके अलावा आप कुछ keywords जैसे की normal, bold, bolder, lighter इसका भी इस्तेमाल कर सकते है।
उदाहरण
<html>
<head>
<style>
p.normal {
font-weight: normal;
}
p.light {
font-weight: lighter;
}
p.thick {
font-weight: bold;
}
p.thicker {
font-weight: 900;
}
</style>
</head>
<body>
<p class="normal">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="light">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="thick">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="thicker">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>Font Variant property
font के variant को define करने के लिए इस properties का इस्तेमाल किया जाता है।
इस property की दो value होती है।
- normal – इसकी मदद से font normal हो जाता है।
- small-caps – इसमे font upper case मे convert हो जाता है और fonts का आकार अन्य fonts की तुलना मे छोटा हो जाता है।
उदाहरण
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
font-variant: normal;
}
p.small {
font-variant: small-caps;
}
</style>
</head>
<body>
<p class="normal">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="small">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>Font Size Property
Text की size को set करने के लिए font-size property का इस्तेमाल किया जाता है।
web designing मे text size बहोत ही important role अदा करता है। कभी बी paragraph headings की तरह और headings paragraph की तरह नहीं दिखना चाहिए।
आप हमेशा headings के लिए <h1>…..<h6> tags और paragraphs के लिए <p> tags का इस्तेमाल करे।
font size को define करने के लिये आप pixel, %, Em, vw जैसे unit का इस्तेमाल कर सकते है।
font size with pixels
आप text-size property की value को pixel मे set कर सकते है।
उदाहरण
<html>
<head>
<style>
h1 {
font-size: 45px;
}
h2 {
font-size: 35px;
}
p {
font-size: 16px;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
</body>
</html>font size with Em
Many developers pixel की जगह em का इस्तेमाल करते है।
यहा 1em = 16px होता है।
यहा browser की default text size 16px है। इसलिए 1em की default size 16px है।
उदाहरण
<html>
<head>
<style>
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.875em;
}
p {
font-size: 0.85em;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
</body>
</html>font size with %
आप text-size property की value को percentage मे set कर सकते है।
उदाहरण
<html>
<head>
<style>
h1 {
font-size: 100%;
}
h2 {
font-size: 70%;
}
p {
font-size: 50%;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
</body>
</html>Combination of Percent and Em
अगर आप <body> element की default font-size percentage मे set कर देते है और आप particular element की font size em मे देते है तो सभी browser मे text size same show होगी।
उदाहरण
<html>
<head>
<style>
body{
font-size: 100%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.875em;
}
p {
font-size: 0.85em;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
</body>
</html>Responsive Font Size
इसके लिए text-size property की value को vwमे set कर सकते है। इसका मतलब होता है “viewport width”
viewport browser windows की size को दर्शाता है।
1vw= 1% of viewport width
अगर viewport 50cm wide है तो 1vw = 0.5cm होता है।
उदाहरण
<html> <body> <h1 style="font-size:10vw;">Responsive Text</h1> <p style="font-size:5vw;">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> </body> </html>
Font Shorthand Property
यह बहोत ही useful तरीका है जिसमे हम ऊपर दिये गये सारे rules को single line मे specify कर सकते है।
इस property को इस प्रकार से लिख सकते है।
font: [font-style] [font-variant] [font-weight] [font-size] [font-family]
उदाहरण
<html>
<head>
<style>
p.a {
font: italic bold 12px/30px Georgia, serif;
}
</style>
</head>
<body>
<h1>The font Property</h1>
<p class="a">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>