CSS Font Tutorials in Hindi – Part 12

आज इस आर्टिकल में हम आपको CSS Font Tutorials in Hindi – Part 12 के बारे में बताने जा रहे है.

CSS की font property का इस्तेमाल किसी भी text के font-family, boldness, size और formatting के लिए इस्तेमाल किया जा सकता है.

CSS Font Family

अगर हम अपने डॉक्यूमेंट में किसी भी text का font family चेंज करना चाहते है तो हम font-family property का इस्तेमाल कर सकते है. इसकी value में हम उन font family को रखे है जो आपके browser में compatible हो. कई बार हमारा डॉक्यूमेंट किसी और browser में open किया जाता है जहाँ पर हमारे द्वारा सेट किया font-family compatible नहीं होता है. इसको ठीक करने के लिए हम , से कई अलग अलग font family भी सेट कर सकते है.

Example

p {
     font-family: "Times New Roman", Times, serif;
}

CSS Font Style

इसका इस्तेमाल करके हम अपने text के style को चेंज कर सकते है जैसे italic, oblique

इसकी सिर्फ 3 value ही होती है.

Example

p.normal_class {
   font-style: normal;
}

p.italic_class {
   font-style: italic;
}

p.oblique_class {
   font-style: oblique;
}

CSS Font Size

इसका इस्तेमाल हम तब करते है जब हमें किसी text की default value को override करना होता है. इसका इस्तेमाल करके हम किसी भी text को छोटा या बड़ा कर सकते है. जैसे h1 के text को छोटा करना या h6 के text को बड़ा करना इत्यादि.

इसकी value mm, cm, px, rem, em और % में दी जा सकती है.

Example

h1 {
    font-size: 30px;
}

h2 {
    font-size: 50px;
}

p {
    font-size: 20px;
}

CSS Font Weight

इसका इस्तेमाल हम तब करते है जब हमें किसी text को specific पॉइंट पर bold करना हो. इसके लिए हम font-weight का इस्तेमाल करते है. इसकी value हम 100 से लेकर 900 के बीच में लिख कर अपने हिसाब से text के weight को सेट कर सकते है. यहाँ पर 100 की value thin है और 900 की value हम thick मान सकते है.

Example

p.thin{
     font-weight: 100;
}

p.thick {
     font-weight: 900;
}

CSS Font Variant

इसका इस्तेमाल तब करते है जब हम किसी भी text के font को small cap में दिखाना चाहते हो. यह किसी भी text को uppercase में convert कर देता है लेकिन उसका font साइज़ को small रखता है.

Example

p.small_cap_class {
    font-variant: small-caps;
}

CSS Link Tutorials in Hindi – Part 13>>>>>>>>>>