• Skip to primary navigation
  • Skip to main content

  • Home
  • Tutorials
    • Computer Tutorial
    • Internet Tutorial
    • Windows Tutorial
    • Android Tutorial
    • MS Office
      • MS Word Tutorial
      • MS Excel Tutorial
      • MS PowerPoint Tutorial
    • HTML Tutorial
    • CSS Tutorial
    • WordPress Tutorial
    • Blogger Tutorial
    • MS Paint Tutorial
    • WordPad Tutorial
    • Notepad Tutorial
    • Paytm Tutorial
    • WhatsApp Tutorial
  • How To
  • Articles
  • Career Guide
  • Video Tutorials
  • Books
  • Courses

CSS Font Property in Hindi की पूरी जानकारी.

अंतिम सुधार August 18, 2018 लेखक TP Staff

इस Tutorial में हम आपको CSS Font Property की पूरी जानकारी देंगे. अध्ययन की सुविधा के लिए हमने इस Tutorial को कई भागों में बांटा हैं.

Table of Content

  1. CSS Font Property का परिचय – Introduction to CSS Font Property in Hindi.
  2. Different Type of CSS Font Properties in Hindi.
    • font-family Property
    • font-style Property
    • font-variant Property
    • font-weight Property
    • font-size Property
    • font Property
  3. आपने क्या सीखा?

CSS Font Property का परिचय

CSS Font Property का उपयोग Fonts की Look को नियंत्रित करने के लिए किया जाता हैं. Font Property और Text Property दोनों Properties Content की Visual Appearance को Control करती हैं.

CSS Font Property से आप Font Color, Size, Weight आदि की Setting कर सकते हैं. और Fonts को Responsive भी बना सकते हैं.

विभिन्न प्रकार की Font Properties

Fonts को Customize करने के लिए CSS बहुत सारी भिन्न-भिन्न Font Properties Provide कराती हैं. जिनके बारे में नीचे बताया जा रहा हैं.

font-family Property

इस Property का इस्तेमाल किसी भी HTML Element की Font Family Declare करने के लिए किया जाता हैं.

CSS में दो प्रकार की Font Family होती हैं:

  1. Generic Font Family – इस Font Family में एक समान दिखने वाले Font Families के Groups शामिल होते हैं.
  2. Font Family – इसमें सिर्फ एक Particular Font Family होती हैं.

font-family Property द्वारा आप एक से ज्यादा Font Families Declare कर सकते हैं. ऐसा Browsers के कारण किया जाता हैं, क्योंकि सभी ब्राउजर सभी फॉन्टों को Support नही करते हैं.

अगर फॉन्ट नाम में एक से ज्यादा शब्द हैं तो, उसे Quotation Marks (“”) के भीतर लिखा जाता हैं. जैसे; “Times New Roman”. एक से ज्यादा Font Families को Comma (,) द्वारा अलग किया जाता हैं.

p {
font-family: “Times New Roman”, Serif;
}

font-style Property

font-style Property का इस्तेमाल Fonts की Style Declare करने के लिए किया जाता हैं. यानि आप Fonts को किस प्रकार देखना चाहते हैं. इसके द्वारा अधिकतर Fonts को Italicize करने के लिए किया जाता हैं. इसकी तीन संभावित Values होती हैं.

  1. normal
  2. italic
  3. oblique
<!DOCTYPE html>
<html>
<head>
<title>CSS Font Style Property</title></head>
<body><p style=”font-style:normal;”>

This Paragraph Text is Normal.

</p>

<p style=”font-style:italic;”>

This Paragraph Text is Italic.

</p>

<p style=”font-style:oblique;”>

This Paragraph Text is Oblique.

</p>
</body>
</html>

ऊपर दिया कोड इस प्रकार का परिणाम देगा.



This Paragraph Text is Normal.

This Paragraph Text is Italic.

This Paragraph Text is Oblique.

font-variant Property

इस Property द्वारा Fonts के Variant को Declare किया जाता हैं. इसकी दो संभावित Values होती हैं:

  1. normal – इसमें Font Normal होता हैं.
  2. small-caps – इसमें Fonts का आकार अन्य Fonts की तुलना में छोटा हो जाता हैं और Fonts Uppercase में Convert हो जाते हैं.
<!DOCTYPE html>
<html>
<head>
<title>CSS Font Variant Property</title></head>
<body><p style=”font-variant:normal;”>

This Paragraph Text Variant is Normal.

</p>

<p style=”font-variant:small-caps;”>

This Paragraph Text Variant is Small Caps.

</p>
</body>
</html>

ऊपर दिया कोड इस प्रकार का परिणाम देगा.



This Paragraph Text Variant is Normal.

This Paragraph Text Variant is Small Caps.

font-weight Property

इस Font Property का इस्तेमाल Fonts का Weight Declare करने के लिए किया जाता हैं. यानि आपका फॉन्ट कितना Bold होगा.

इसकी bold, bolder और lighter संभावित Values होती हैं. इसके अलावा आप Custom Weight भी Declare कर सकते हैं. जैसे, 100, 300, 500, 700 आदि.

<!DOCTYPE html>
<html>
<head>
<title>CSS Font Weight Property</title></head>
<body><p style=”font-weight:normal;”>

This Paragraph Text Weight is Normal.

</p>

<p style=”font-weight:bold;”>

This Paragraph Text Weight is Bold.

</p>
</body>
</html>

ऊपर दिया कोड इस प्रकार का परिणाम देगा.



This Paragraph Text Weight is Normal.

This Paragraph Text Weight is Bold.

font-size Property

इस Property का इस्तेमाल Font Size को Control करने के लिए किया जाता हैं. इसकी संभावित Value xx-small, x-small, small, smaller, medium, large, larger, x-large, xx-large, in Pixels, in % हो सकती हैं.

<!DOCTYPE html>
<html>
<head>
<title>CSS Font Size Property</title></head>
<body><p style=”font-size:small;”>

This Paragraph Text Variant Size is Small.

</p>

<p style=”font-size:large;”>

This Paragraph Text Size is Large.

</p>
</body>
</html>

ऊपर दिया कोड इस प्रकार का परिणाम देगा.

This Paragraph Text Size is Small.

This Paragraph Text Size is Large.

font Property

इस Property का इस्तेमाल Shorthand Declaration के लिए किया जाता हैं. आप एक साथ सभी Font Properties को Declare कर सकते हैं.

p {
font:italic small-caps bold 15px Serif;
}

आपने क्या सीखा?

इस Tutorial में हमने आपको CSS Font Property के बारे में जानकारी दी हैं. हमे उम्मीद हैं कि यह Tutorial आपके लिए उपयोगी साबित होगा.

About TP Staff

लेखक: TP Staff

TP Staff, TutorialPandit की कम्प्यूटर और टेक्नोलॉजी पेशेवरों की टीम है, जिसका नेतृत्व जी पी गौतम द्वारा किया जाता है. TutorialPandit के माध्यम से भारत देश में हर साल लाखों लोग फ्री डिजिटल शिक्षा ग्रहण कर रहे है.

Join TutorialPandit on Telegram
Use Filmora video editor to express your creativity and amaze with beautiful results.

Reader Interactions

Comments

  1. Prashant says

    October 8, 2018 at 1:16 am

    This is good subject
    Please give a next proparty
    Zoom in and zoom out on mouse hover
    Thank you sir

    Reply
    • TP Staff says

      October 8, 2018 at 8:39 am

      प्रशांत जी, आपके सुझाव के लिए धन्यवाद. हम जल्द ही आपको इसके बारे में जानकारी उपलब्ध करवायेंग़े.

      Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

© Copyright TutorialPandit. All Rights Reserved.

  • About Us
  • Contact Us
  • Terms
  • Privacy Policy
  • Comment Policy