CSS मे Font Property का उपयोग Look और Texts को Control करने के लिये किया जाता है. CSS से आप Fonts Size, Style, Weight, line-height आदि को Change कर सकते है.
font-family Property
font-size Property
font-style Property
font-variant Property
font-weight Property
Font Family Property एक Element के लिए Font को Specified करती है. Font Family Property मे Fallback System के रूप मे कई Font Name हो सकते है. यदि Browser पहले Font का समर्थन नही करता है तो यह अगले Font पर प्रयास करती है.
<!DOCTYPE HTML>
<html>
<head>
<title>Font Family Example</title>
</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>
इसका उपयोग एचटीएमएल एलिमेंट की फ़ॉन्ट स्टाइल को निर्दिष्ट करने के लिए किया जाता है. Font Style की तीन value हो सकती है Normal, Italic या Oblique.
<!DOCTYPE HTML>
<html>
<head>
<title>Font Style Example</title>
<style>
h2{ font-style: oblique; }
p { font-style: italic; }
h3 { font-style: normal; }
</style>
</head>
<body>
<h2>Wellcome to My Website </h2>
<p>This text will be prepare, in italic style</p>
<h3>My Name is Ammu.</h3>
</body>
</html>
इसका उपयोग Small Caps बनाने के लिए किया जाता है. यह सामान्य या Small Caps हो सकता है. हालांकि यह सभी Font मे काम नही करता है.
<!DOCTYPE HTML>
<html>
<head>
<title>Font Variant Example</title>
<style>
p{font-variant: small-caps;}
</style>
</head>
<body>
<p>Wellcome to My Website</p>
</body>
</html>
Font Weight Property किसी भी Font की Boldness और Thickness को परिभाषित करती है. इसकी Value Range 100-900 तक होती है. इसके अलावा आप कुछ Keyword Like This Normal, Bold, Bolder, Lighter आदि का भी उपयोग कर सकते है. कोई भी Value Set नही करने की Condition मे इसकी Value By Default Normal होती है.
<!DOCTYPE HTML>
<html>
<head>
<title>Font Weight Example</title>
</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:300;">This font is 300 weight.</p>
</body>
</html>
इसका उपयोग HTML एलिमेंट के फ़ॉन्ट साइज को सेट करने के लिए किया जाता है. फ़ॉन्ट साइज को अलग अलग तरीकों से सेट किया जा सकता है जैसे की Pixel, Percent, EMI. इसका उपयोग करके आप फ़ॉन्ट की Value Set कर सकते हैं.
<!DOCTYPE HTML>
<html>
<head>
<title>Font Size Example</title>
<style>
h1 {
font-size: 250%;
}
h2 {
font-size: 200%;
}
p {
font-size: 100%;
}
</style>
</head>
<body>
<h1>Wellcome to My Website</h1>
<h2>My Name is Ammu</h2>
<p>I Live in Telangana.</p>
</body>
</html>