HTML DOM स्टाइल फॉन्ट प्रॉपर्टी का उपयोग फॉन्ट-स्टाइल, फॉन्ट-वेरिएंट, फॉन्ट-वेट, फॉन्ट-साइज, लाइन-हाइट और फॉन्ट-फ़ैमिली नामक छह गुणों को सेट करने या प्राप्त करने के लिए किया जाता है। फ़ॉन्ट आकार और फ़ॉन्ट परिवार आवश्यक विशेषता मान हैं और यह अन्य सभी अनुपलब्ध मानों के लिए डिफ़ॉल्ट सेट कर सकता है।
फ़ॉन्ट गुण वापस करने के लिए सिंटैक्स निम्नलिखित है -
object.style.font
फ़ॉन्ट गुण सेट करना -
| मान <वें शैली ="चौड़ाई:73.1944%; पाठ-संरेखण:केंद्र;">विवरण | |
|---|---|
| शैली | फ़ॉन्ट शैली को पूर्वनिर्धारित करना। |
| संस्करण | स्मॉल-कैप्स फ़ॉन्ट में टेक्स्ट को फ़ॉरसेट करना। |
| वजन | फ़ॉन्ट के लिए बोल्डनेस निर्दिष्ट करना। |
| आकार | फ़ॉन्ट आकार निर्दिष्ट करना। |
| लाइनहाइट | लाइनों के बीच की दूरी को निर्दिष्ट करना। |
| परिवार | फ़ॉन्ट फ़ेस को फ़ॉरसेट करना। |
| कैप्शन | उपशीर्षक नियंत्रणों पर लागू होता है उदा। बटन, ड्रॉप-डाउन आदि |
| आइकन | लेबल आइकन फ़ॉन्ट निर्दिष्ट करने के लिए। |
| मेनू | मेनू में प्रयुक्त होने वाला फ़ॉन्ट |
| संदेश-बॉक्स | संवाद बॉक्स में प्रयुक्त फ़ॉन्ट |
| छोटा कैप्शन | छोटे नियंत्रणों में प्रयुक्त होने वाला फ़ॉन्ट |
| स्थिति-बार | विंडो स्थिति बार फ़ॉन्ट को वर्तमान फ़ॉन्ट पर सेट करता है। |
| प्रारंभिक | इस गुण को प्रारंभिक मान पर पूर्वनिर्धारित करना। |
| उत्तराधिकारी | मूल संपत्ति मूल्य को विरासत में मिला। |
आइए फ़ॉन्ट गुण के लिए एक उदाहरण देखें -
उदाहरण
<!DOCTYPE html>
<html>
<head>
<style>
.PARA1{
font: oblique 5deg small-caps bold 1.3em/3 cursive;
}
</style>
<script>
function changeFont() {
for(var i=0;i<2;i++){
document.getElementsByClassName("PARA1")[i].style.font="italic bold 30px Verdana ";
}
document.getElementById("Sample").innerHTML="The text in the above two paragraphs is now changed";
}
</script>
</head>
<body>
<p class="PARA1">This is demo text</p>
<p class="PARA1">This is another demo text</p>
<p>Change the above container div flex direction by clicking the below button</p>
<button onclick="changeFont()">Change Font</button>
<p id="Sample"></p>
</body>
</html> आउटपुट
“फ़ॉन्ट बदलें . क्लिक करने पर "बटन -
“फ़ॉन्ट बदलें . क्लिक करने पर "बटन -
