सीएसएस - फ़ॉन्ट्स

यह अध्याय आपको HTML तत्व में उपलब्ध सामग्री के फोंट सेट करना सिखाता है। आप एक तत्व के निम्नलिखित फ़ॉन्ट गुण सेट कर सकते हैं -

font-family प्रॉपर्टी का उपयोग फ़ॉन्ट का चेहरा बदलने के लिए किया जाता है।
font-style संपत्ति का उपयोग एक फ़ॉन्ट इटैलिक या तिरछा बनाने के लिए किया जाता है।
font-variant प्रॉपर्टी का इस्तेमाल स्मॉल कैप इफेक्ट बनाने के लिए किया जाता है।
font-weight प्रॉपर्टी का उपयोग फ़ॉन्ट को कितना बोल्ड या हल्का करने के लिए बढ़ाने या घटाने के लिए किया जाता है।
font-size संपत्ति का उपयोग फ़ॉन्ट के आकार को बढ़ाने या घटाने के लिए किया जाता है।
font अन्य फ़ॉन्ट गुणों को निर्दिष्ट करने के लिए संपत्ति का उपयोग शॉर्टहैंड के रूप में किया जाता है।

फ़ॉन्ट परिवार सेट करें

निम्नलिखित उदाहरण है, जो दर्शाता है कि किसी तत्व के फ़ॉन्ट परिवार को कैसे सेट किया जाए। संभावित मान किसी भी फ़ॉन्ट परिवार का नाम हो सकता है।

<html>
   <head>
   </head>

   <body>
      <p style = "font-family:georgia,garamond,serif;">
         This text is rendered in either georgia, garamond, or the 
         default serif font depending on which font  you have at your system.
      </p>
   </body>
</html>

यह निम्नलिखित परिणाम देगा -

फ़ॉन्ट शैली सेट करें

निम्नलिखित उदाहरण है, जो प्रदर्शित करता है कि किसी तत्व की फ़ॉन्ट शैली कैसे सेट की जाए। संभावित मूल्य सामान्य, इटैलिक और तिरछा हैं ।

<html>
   <head>
   </head>

   <body>
      <p style = "font-style:italic;">
         This text will be rendered in italic style
      </p>
   </body>
</html>

यह निम्नलिखित परिणाम देगा -

फ़ॉन्ट भिन्न सेट करें

निम्न उदाहरण दर्शाता है कि किसी तत्व के फ़ॉन्ट संस्करण को कैसे सेट किया जाए। संभावित मूल्य सामान्य और छोटे-कैप हैं ।

<html>
   <head>
   </head>

   <body>
      <p style = "font-variant:small-caps;">
         This text will be rendered as small caps
      </p>
   </body>
</html>

यह निम्नलिखित परिणाम देगा -

फ़ॉन्ट वजन सेट करें

निम्न उदाहरण दर्शाता है कि किसी तत्व का फ़ॉन्ट भार कैसे सेट किया जाए। फ़ॉन्ट-भार गुण यह निर्दिष्ट करने के लिए कार्यक्षमता प्रदान करता है कि फ़ॉन्ट कितना बोल्ड है। संभावित मूल्य सामान्य, बोल्ड, बोल्डर, लाइटर, 100, 200, 300, 400, 500, 600, 700, 800, 900 हो सकते हैं ।

<html>
   <head>
   </head>

   <body>
      <p style = "font-weight:bold;">
         This font is bold.
      </p>
      
      <p style = "font-weight:bolder;">
         This font is bolder.
      </p>
      
      <p style = "font-weight:500;">
         This font is 500 weight.
      </p>
   </body>
</html>

यह निम्नलिखित परिणाम देगा -

फ़ॉन्ट आकार सेट करें

निम्न उदाहरण दर्शाता है कि किसी तत्व का फ़ॉन्ट आकार कैसे सेट किया जाए। फ़ॉन्ट-आकार की संपत्ति का उपयोग फ़ॉन्ट के आकार को नियंत्रित करने के लिए किया जाता है। संभावित मान xx- छोटे, x- छोटे, छोटे, मध्यम, बड़े, x- बड़े, xx- बड़े, छोटे, बड़े, आकार में पिक्सेल या% में हो सकते हैं ।

<html>
   <head>
   </head>

   <body>
      <p style = "font-size:20px;">
         This font size is 20 pixels
      </p>
      
      <p style = "font-size:small;">
         This font size is small
      </p>
      
      <p style = "font-size:large;">
         This font size is large
      </p>
   </body>
</html>

यह निम्नलिखित परिणाम देगा -

फ़ॉन्ट आकार समायोजित करें

निम्न उदाहरण दर्शाता है कि किसी तत्व के फ़ॉन्ट आकार को कैसे सेट किया जाए। यह गुण फोंट को अधिक सुपाठ्य बनाने के लिए आपको x-ऊँचाई समायोजित करने में सक्षम बनाता है। संभव मान कोई भी संख्या हो सकती है।

<html>
   <head>
   </head>

   <body>
      <p style = "font-size-adjust:0.61;">
         This text is using a font-size-adjust value.
      </p>
   </body>
</html>

यह निम्नलिखित परिणाम देगा -

फ़ॉन्ट खिंचाव सेट करें

निम्न उदाहरण दर्शाता है कि किसी तत्व के फ़ॉन्ट खिंचाव को कैसे सेट किया जाए। यह गुण उपयोगकर्ता के कंप्यूटर पर निर्भर करता है कि उपयोग किए जा रहे फ़ॉन्ट का विस्तारित या गाढ़ा संस्करण है।

संभावित मान सामान्य, व्यापक, संकरा, अति-संघनित, अतिरिक्त-संघनित, संघनित, अर्ध-संघनित, अर्ध-विस्तारित, विस्तारित, अतिरिक्त-विस्तारित, अति-विस्तारित हो सकता है ।

<html>
   <head>
   </head>

   <body>
      <p style = "font-stretch:ultra-expanded;">
         If this doesn't appear to work, it is likely that your computer 
         doesn't have a <br>condensed or expanded version of the font being used.
      </p>
   </body>
</html>

यह निम्नलिखित परिणाम देगा -

आशुलिपि संपत्ति

आप उपयोग कर सकते हैं फॉन्ट ही बार में सभी फ़ॉन्ट गुणों को सेट करने संपत्ति। उदाहरण के लिए -

<html>
   <head>
   </head>

   <body>
      <p style = "font:italic small-caps bold 15px georgia;">
         Applying all the properties on the text at once.
      </p>
   </body>
</html>

यह निम्नलिखित परिणाम देगा -