CSS in Hindi – Introduction to Font Properties

by
  • Introduction to CSS font properties in Hindi
  • properties font family with CSS in Hindi
  • properties font style with CSS in Hindi

Introduction to Font Properties

जब भी html मे paragraph लिखते है | तो वहा पर normal font show होती है | अगर heading लिखते है | तो अलग font show होती है | यह html की by default font property होती है |

जो html tags के through मिलती है | लेकिन css का use करके font को change कर सकते है | यानी अपने according font को change किया जा सकता है |

Font-family Property

जब भी हम font को change करना चाहते है | तो हमे font-family property का use करना पड़ता है | लेकिन font-family property मे कुछ values दी जाती है | जिनका नाम हम निचे दे रहे है |

  • Verdana
  • Arial
  • Courier 
  • serif
  • cursive
  • initial
  • inherit
  • sans-serif

ऊपर दिये गये blocks मे font-family property की कुछ values दी गयी है | जिनका use font को change करने के लिए किया जाता है |

<html>
<head>
       <style type="text/css">
h1 { font-family: cursive;}
    </style>
</head>
<body>
<h1>Esay</h1>
</body>
</html>

font-stretch Property

Css मे इस property के द्वारा font को stretch किया जाता है। font-stretch property की value normal, expanded, unset और semi-condensed आदि हो सकते है। अब इस property को कोई भी browser support नहीं करता है।

<html>
<head>
       <style type="text/css">
h1 { font-stretch: unset;  }
    </style>
</head>
<body>
<h1>Esay Hindi Tutorials</h1>
</body>
</html>

font-size-adjust Property

font-size-adjust Property के द्वारा font की size adjust करते हैं। जब font-size adjust Property को define करते है | तो font का height automatically adjust हो जाता है | निचे example दिया जा रहा है |

<html>
<head>
       <style type="text/css">
#p1 { font-size-adjust : 0.14;  }
    </style>
</head>
<body>
<p id="p1">Esay Hindi Tutorials</p>
</body>
</html>

Font-size Property

font-size Property का use font को resize करने के लिए किया जाता है | इसकी value आप px ( pixel ) मे दे सकते है | अगर आप चाहे तो इसका value % ( percentage ) मे भी दे सकते है | निचे example दिया जा रहा है |

<html>
<head>
       <style type="text/css">
#p1 { font-size : 30px;  }
#p2 { font-size : 40%;  }
    </style>
</head>
<body>
<p id="p1">Esay Hindi Tutorials</p>
<p id="p2">Esay Hindi Tutorials</p>
</body>
</html>

Font-style Property

font-style Property के द्वारा font का style change किया जाता है | font-style property की values normal, italic, inherit, oblique और initial हो सकती हैं। इसका example निचे दिया जा रहा है।

<html>
<head>
       <style type="text/css">
#p1 { font-style: italic;  }
#p2 { font-size : initial;  }
    </style>
</head>
<body>
<p id="p1">Esay Hindi Tutorials</p>
<p id="p2">Esay Hindi Tutorials</p>
</body>
</html>

Font-variant Property

Font-variant Property के द्वारा आप font का variants change कर सकते है। Font-variant Property के द्वारा font को capital letters में show किया जाता है। इस property की values normal, unset, initial, inherit, और small-caps हो सकती है। इसका example निचे दिया जा रहा है।

<html>
<head>
       <style type="text/css">
#p1 { font-variant: small-caps;  }
#p1 { font-variant: unset;  }
    </style>
</head>
<body>
<p id="p1">Esay Hindi Tutorials</p>
<p id="p2">Esay Hindi Tutorials</p>
</body>
</html>

Font-weight Property

font-weight Property के द्वारा font का weight कम या जादा कर सकते है। font-weight Property यह define करती है | की हमारा font कितना bold या bolder होगा | font-weight Property की value numerical और alphabetical दोनों दे सकते है | निचे example दिया जा रहा है |

<html>
<head>
       <style type="text/css">
#p1 { font-weight: 900;  }
#p2 { font-weight: bold;  }
#p3 { font-weight: bolder;  }
    </style>
</head>
<body>
<p id="p1">Esay Hindi Tutorials</p>
<p id="p2">Esay Hindi Tutorials</p>
<p id="p3">Esay Hindi Tutorials</p>
</body>
</html>
CSS Property & Values CSS Text Properties
Previous Next