CSS फॉन्ट स्टाइलिंग में महत्वपूर्ण भूमिका निभाता है। CSS फॉन्ट प्रॉपर्टीज हमें font-family, font-size, font-weight, font-kerning, और बहुत सारी प्रॉपर्टीज को बदलने की अनुमति देती हैं। CSS font प्रॉपर्टी font-style, font-variant, font-weight, font-size/line-height और font-family के लिए एक शॉर्टहैंड है। इसके अलावा, हम CSS text-shadow, text-stroke, text-fill-color, color, आदि का उपयोग करके text-decoration के माध्यम से टेक्स्ट पर स्टाइल्स लागू कर सकते हैं।
color
यह प्रॉपर्टी टेक्स्ट का रंग बदलने के लिए उपयोग की जाती है।
font-family
यह प्रॉपर्टी किसी एलिमेंट के लिए फॉन्ट फेस सेट करने के लिए उपयोग की जाती है।
font-kerning
कैरेक्टर स्पेसिंग को यूनिफॉर्म बनाने और पठनीयता बढ़ाने के लिए font-kerning प्रॉपर्टी का उपयोग किया जाता है। हालांकि, यह प्रॉपर्टी फॉन्ट-विशिष्ट है।
font-size
font-size प्रॉपर्टी फॉन्ट का आकार सेट करती है।
font-stretch
कुछ फॉन्ट्स में कंडेंस्ड, बोल्ड आदि जैसे अतिरिक्त फेस होते हैं। font-stretch प्रॉपर्टी का उपयोग इन्हें निर्दिष्ट करने के लिए किया जाता है।
font-style
टेक्स्ट को एक कोण से इटैलिकाइज़ करने के लिए font-style प्रॉपर्टी का उपयोग किया जाता है।
font-variant
font-variant हमें यह निर्दिष्ट करने की अनुमति देता है कि क्या किसी एलिमेंट को स्मॉल कैप्स में प्रदर्शित किया जाना चाहिए या नहीं।
font-weight
कैरेक्टर्स की बोल्डनेस font-weight प्रॉपर्टी द्वारा निर्दिष्ट की जाती है।
line-height
यह प्रॉपर्टी दो लाइनों के बीच की स्पेसिंग सेट करती है।
text-decoration
अंडरलाइन या ओवरलाइन करने और उसे स्टाइल करने के लिए text-decoration का उपयोग किया जाता है।
text-shadow
बॉक्स-शैडो की तरह, यह प्रॉपर्टी वांछित अनुसार कैरेक्टर्स पर छाया जोड़ती है।
इसके अलावा, text-indent, text-overflow, white-space, word-break, direction, hyphens, text-orientation, word-wrap, आदि जैसे टेक्स्ट लेआउट प्रॉपर्टीज हैं।
सिंटैक्स
font प्रॉपर्टी का सिंटैक्स निम्नलिखित है:
Selector { font-property: /*value*/ }
उदाहरण
निम्नलिखित उदाहरण CSS फॉन्ट्स प्रॉपर्टी को दर्शाते हैं:
<!DOCTYPE html> <html> <head> <style> p { font: 1.6em arial; text-shadow: -3px -12px lightblue; } p + p { font: italic bold 12px/30px menu; text-shadow: unset; box-shadow: 0 0 5px 1px black; } div { width: 30%; font-size: 1.4em; font-family: cursive; background-color: tomato; } </style> </head> <body> <h2>Demo Heading</h2> <p>This is demo text</p> <p>This text is for demo and included here to display different font styles in CSS.</p> <div>Another text with different font style.</div> </body> </html>
आउटपुट
यह निम्नलिखित आउटपुट देता है:
एक और उदाहरण
<!DOCTYPE html> <html> <head> <style> p { font: oblique 5deg small-caps bold 1.3em/0.5px cursive; border: 3px solid lightcyan; } </style> </head> <body> <p>This is demo text</p> <p>This is another demo text</p> </body> </html>
आउटपुट
यह निम्नलिखित आउटपुट देता है:
