CSS Font properties in Hindi – कैसे use करें?

CSS Font Properties in Hindi

आज हम CSS में उपलब्ध अलग-अलग प्रकार के Font Properties के बारे में जानेंगे और उनका उपयोग कर अपने website के fonts को अपने आवश्यकता अनुसार customize करना सीखेंगे।

CSS में कई सारे Font Properties हैं जिनकी list नीचे दी जा रही है:

• font-family
• font-size
• font-style
• font-weight
• font-variant
• font (shorthand)

font change करते समय हमे इस बात का ध्यान रखना चाहिए की फॉण्ट हम वही चुने जो दिखने में साफ़ और समझ में आने लायक हो इसके साथ-साथ color, size आदि का भी ध्यान रखना जरूरी है, तो चलिए जानते हैं font properties के बारे में:

Font Family in CSS in Hindi

font family को’ आपने HTML में use किया होगा अब हम इसे CSS के जरिये text में apply कर के देखेंगे। इसमें हम selected element के text के लिए list of fonts apply करते हैं।

इसको समझने के लिए नीचे एक उदहारण दिया जा रहा है:

ऊपर example में देखे, हमने p element के text के लिए  font family specify किया है हमने वहाँ तीन fonts के नाम दिए हैं और उसकी priority भी define की है।

इसका मतलब यह है की p tag के अंदर उपस्थित text का font Roboto होगा यदि यह font user के system में installed ना हो तो दूसरा फॉण्ट Times अप्लाई होगा और दोनों की अनुपस्थिति में तीसरे फॉण्ट Serif का उपयोग होगा।

हम दो तरह के fonts उपयोग कर सकते हैं एक specific font या generic font:

• Specific font वो font होते हैं जो की ज्यादातर system में पहले से उपलब्ध नही होते इसे दुसरे source से install किया जाता है।
• Generic font, ये पहले से  लगभग  सारे users के system में availabe होते हैं

सबसे अच्छा तरीका यही होता है की हम multiple fonts assign करें जिसमे specific font को पहले और generic को बाद में लिखा जाये, इससे होगा यह की यदि वह specific font यूज़र के सिस्टम में मौजूद न हो तो generic font apply हो जायेगा।

जैसा की आप example में देख सकते हैं हमने Roboto को पहले और उसके बाद जेनेरिक फोंट्स Times व Serif को लिखा है।

Font Size

font-size प्रॉपर्टी का उपयोग फॉण्ट की size को modify करने के लिए किया जाता है।

क्या आपको पता है की हम font की size percentage में भी दे सकते हैं?

इसके अलावा कुछ keywords जैसे small, x-small, xx-small, medium, large, x-large, xx-large या units जैसे px, em आदि का उपयोग भी कर सकते हैं।

यहाँ पर 1em = 16px होता है।

Note: लगभग सारे web browsers में by default text की standard size 16px होती है, इसका मतलब यह है की अगर आप size define नही करते हैं तो browser में text size 16px होगी।

World Wide Web consortium (W3C) के अनुसार हमे em या percentage(%) value का उपयोग करना चाहिये।

Example:

Font Style

CSS की सहायता से हम font style change करने के लिए font-style property का use किया जाता है।

इसकी तीन value हो सकती है: normal, italic या oblique.

इसका उदहारण आप नीचे देख सकते हैं:

Font Weight

font-weight property किसी font की boldness या thickness को define करता है।

इसकी value range 100-900 होती है इसके अलावा आप कुछ keyword जैसे normal, bold, bolder, lighter आदि का भी उपयोग कर सकते हैं।

कोई value set नही करने की स्थिति में By default इसकी value normal होती है।

इसका example नीचे देख सकते हैं:

Font Variant

इस प्रॉपर्टी से आप फॉण्ट को small-caps में बदल सकते हैं। लेकिन ध्यान रहे यह सभी fonts में काम नही करता है।

Example:

Shorthand Property

यह तरीका बहुत ही useful और ज्यादा उपयोग होने वाला है क्योकि इसमें हम ऊपर दिए सारे rules को एक single line में specify कर सकते हैं जो की समय और space दोनों को बचाता है।

इस प्रॉपर्टी को कुछ इस प्रकार से लिख सकते हैं:

font: [font-style][font-variant][font-weight][font-size][font-family]

example:

अगर आप CSS के font properties in Hindi से जुड़े कुछ सवाल पूछना हो या इस ब्लॉग के बारे में कुछ कहना चाहते है तो कमेंट बॉक्स में हमे जरूर बताएं।