CSS font-style In Hindi

📔 : CSS 🔗

font-style property का use करके आप diff - diff तरीके से style भी apply कर सकते हैं। font-style property की 3 values होती हैं -

  • normal
  • italic
  • oblique
element{
  font-style : normal|oblique|italic;
}

This is normal font style

This is oblique font style

This is italic font style

CSS font-style example

CopyFullscreenClose FullscreenRun
<!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>

CSS font-weight

font-weight property का use font का weight (thickness) define करने के लिए किया जाता है , इसकी भी 3 values होती हैं -

  • lighter
  • bold
  • normal
element{
  font-weight : number|normal|bold|lighter|initial;
}

Property Values

  1. number : इसका उपयोग specified number के आधार पर font-weight सेट करने के लिए किया जाता है। इसकी रेंज 1 से 1000 के बीच हो सकती है।

  2. lighter : यह Font-family के मौजूद font-weight पर consider करता है और parent element की तुलना में Font-weight को हल्का बनाता है।

  3. bolder: यह Font-family के मौजूद font-weight पर consider करता है और parent element की तुलना में Font-weight को भारी बनाता है।

  4. bold : इसका उपयोग bold font-weight को define करने के लिए किया जाता है, और इसका numeric value 700 है।

  5. initial: इसका use font-weight को उसके default value पर set करने के लिए किया जाता है

This is lighter font weight

This is bold font weight

This is normal font weight

CSS font-weight example

CopyFullscreenClose FullscreenRun
<!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>

CSS font-variant

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

CSS font-variant example

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

Hey ! I'm Rahul founder of learnhindituts.com. Working in IT industry more than 4.5 years. I love to talk about programming as well as writing technical tutorials and blogs that can help to others .... keep learning :)

Get connected with me - LinkedIn Twitter Instagram Facebook