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 के बारे में अच्छे से समझ आ गया होगा।