If tutorials available on this website are helpful for you, please whitelist this website in your ad blocker😭 or Donate to help us ❤️ pay for the web hosting to keep the website running.
font-style property का use करके आप diff - diff तरीके से style भी apply कर सकते हैं। font-style property की 3 values होती हैं -
element{
font-style : normal|oblique|italic;
}This is normal font style
This is oblique font style
This is italic font style
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS font style example</title>
</head>
<body>
<p style="font-style:normal;">This is <b>normal</b> font style</p>
<p style="font-style:oblique;">This is <b>oblique</b> font style</p>
<p style="font-style:italic;">This is <b>italic</b> font style</p>
</body>
</html>font-weight property का use font का weight (thickness) define करने के लिए किया जाता है , इसकी भी 3 values होती हैं -
element{
font-weight : number|normal|bold|lighter|initial;
}Property Values
number : इसका उपयोग specified number के आधार पर font-weight सेट करने के लिए किया जाता है। इसकी रेंज 1 से 1000 के बीच हो सकती है।
lighter : यह Font-family के मौजूद font-weight पर consider करता है और parent element की तुलना में Font-weight को हल्का बनाता है।
bolder: यह Font-family के मौजूद font-weight पर consider करता है और parent element की तुलना में Font-weight को भारी बनाता है।
bold : इसका उपयोग bold font-weight को define करने के लिए किया जाता है, और इसका numeric value 700 है।
initial: इसका use font-weight को उसके default value पर set करने के लिए किया जाता है
This is lighter font weight
This is bold font weight
This is normal font weight
<!DOCTYPE html>
<html>
<head>
<title> font-weight property </title>
</head>
<body style="font-family: sans-serif;">
<p style="font-weight: normal;">normal property value</p>
<p style="font-weight: lighter;">lighter property value</p>
<p style="font-weight: bolder;">bolder property value</p>
<p style="font-weight: bold;">bold property value</p>
<p style="font-weight: 1000;">number property value</p>
<p style="font-weight: initial;">initial property value</p>
<p style="font-weight: inherit;">inherit property value</p>
<p style="font-weight: unset;">unset property value</p>
</body>
</html>font-variant property का use font का small-caps में define करने के लिए किया जाता है।
element{
font-variant: small-caps|normal;
}small-caps का मतलब है , सभी characters uppercase में convert हो जायँगे लेकिन उनका font-size original size से छोटा रहेगा।
This is normal Font Variant
This is small-caps Font Variant
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS font-variant example</title>
</head>
<body>
<p style="font-variant:normal;">This is <b>normal</b> Font Variant</p>
<p style="font-variant:small-caps;">This is <b>small-caps</b> Font Variant</p>
</body>
</html>I Hope, अब आपको font style के बारे में अच्छे से समझ आ गया होगा।
Hi ! I'm Rahul Kumar Rajput founder of learnhindituts.com. I'm a software developer having more than 4 years of experience. I love to talk about programming as well as writing technical tutorials and blogs that can help to others. I'm here to help you navigate the coding cosmos and turn your ideas into reality, keep coding, keep learning :)
Get connected with me. :) LinkedIn Twitter Instagram Facebook
