CSS Font Property in Hindi

Posted on by

CSS font property के इस लेख के जरिये हम आपको font properties की पूरी जानकारी देंगे | हम निम्न दी गयी css font properties का अपने HTML elements पर उपयोग कर सकते है |

  • font-family : इस property का उपयोग web page पर font के face को change करने के लिए किया जाता है |
  • font-style : इस property का उपयोग web page पर font को italic या oblique करने के लिए किया जाता है |
  • font-variant : इस property का उपयोग font पर small-caps effect देने के लिए किया जाता है |
  • font-weight : इस property का उपयोग font को bold या light दिखाने के लिए किया जाता है |
  • font-size : इस property का उपयोग font की size increase या decrease करने के लिए किया जाता है |
  • font : बाकी सभी font properties के लिए shorthand की तरह इस property का उपयोग किया जाता है |
Contents hide
1 CSS font family property
2 CSS font style property
3 CSS font variant property
4 CSS font weight property
5 Css font size property
6 Css font property

CSS font family property

css font family property की help से हम HTML element के font face को change कर सकते है |

इस property के जरिये हम एक से ज्यादा font familes declare कर सकते है | कईबार कुछ browser perticular font family को support नहीं करते है , इस लिए font-family property में हम एक से ज्यादा font families declare करते है |

निचे दिया गया उदहारण दर्शाता है की कैसे हम css का use कर के web page के element के लिए font family set कर सकते है |

<html>
   <head>
   </head>

   <body>
      <p style = "font-family:georgia,garamond,serif;">
         This is font family example. copy the code and do practical through your local pc.
      </p>
   </body>
</html>

Output

This is font family example. copy the code and do practical through your local pc.

CSS font style property

css font style property का उपयोग font पर style देने के लिए किया जाता है | इस property में main three values दी जाती है |

  • normal : इस value से font normal होता है | HTML web page पर default रूप से सभी font की style normal ही होती है |
  • italic : इस value से font को italic किया जाता है |
  • oblique : इस value से font को oblique किया जाता है |

Example

<html>
   <head>
   </head>

   <body>
      <p style = "font-style:normal;">
         This is normal font
      </p>
      <p style = "font-style:italic;">
         This is italic font
      </p>
      <p style = "font-style:oblique;">
         This is oblique font
      </p>
   </body>
</html>

Output

This is normal font

This is italic font

This is oblique font

CSS font variant property

इस css property के जरिये font के variant को declare किया जाता है | इस property की main दो संभावित values होती है |

  • normal : यह default value होती है | इससे font normal होते है |
  • small-cap : इस value से font capital में convert होने के साथ font की size अन्य font की तुलना मे small हो जाती है |
<html>
   <head>
   </head>

   <body>
      <p style = "font-variant:normal;">
         This normal font example
      </p>

      <p style = "font-variant:small-caps;">
         This small-caps font example
      </p>
   </body>
</html>

Output

This normal font example


This small-caps font example

CSS font weight property

इस property का उपयोग कर के font का weight बढ़ाया या घटाया जाता है | यानि की font को कितना bold या light रखना है वह इस property के जरिये control कर सकते है |

इसकी संभावित values – normal, bold , bolder , lighter होती है | इसके आलावा आप numbers के जरिये custom font weight भी set कर सकते है |

चलिए इसे निचे दिए गए उदहारण की help से समझने की कोशिश करते है |

<html>
   <head>
   </head>

   <body>

      <p style = "font-weight:normal;">
         This is normal font.
      </p>

      <p style = "font-weight:bold;">
         This is bold font.
      </p>
      
      <p style = "font-weight:bolder;">
         This is bolder font.
      </p>

      <p style = "font-weight:lighter;">
         This is lighter font.
      </p>      
      <p style = "font-weight:500;">
         This is custom weight.
      </p>
   </body>
</html>

Output

This is normal font.


This is bold font.


This is bolder font.


This is lighter font.


This is custom weight.

Css font size property

css की इस property का उपयोग font की size को control करने के लिए किया जाता है | इस property की values – small , smaller , x-small , xx-small , medium , large , larger , x-large , xx-large , इसके आलावा pixels या percentage में हो सकती है |

<html>
   <head>
   </head>

   <body>
      <p style = "font-size:18px;">
         This is 18 pixels size font
      </p>
      
      <p style = "font-size:small;">
         This is small size font
      </p>
      
      <p style = "font-size:large;">
         This is large size font
      </p>
   </body>
</html>

Output

This is 18 pixels size font


This is small size font


This is large size font

Css font property

इस property का उपयोग बाकि सभी font properties के लिए shorthand की तरह किया जाता है |

means की जब हमें किसी font पर multiple font properties की requirement होती है, तो वह सभी properties को separate न लिख कर उन सभी properties की values हम only font property में लिख सकते है |

चलिए इसे निम्न उदहारण से समझते है |

<html>
   <head>
   </head>

   <body>
      <p style = "font:italic small-caps bold 20px arial;">
         This is font's shorthand property example
      </p>
   </body>
</html>

Output

This is font’s shorthand property example

यह भी पढ़े :-