फ़ॉन्ट-साइज़ प्रॉपर्टी

font-size प्रॉपर्टी टेक्स्ट के फ़ॉन्ट का आकार सेट करती है। प्रॉपर्टी का मान कोई भी आकार की इकाइाँ (आमतौर पर, px, em या rem) या विशेष कीवर्ड (बहुत कम इस्तेमाल) हो सकता है।

सिंटैक्स

सिलेक्टर {
	font-size: मान;
}

कीवर्ड के रूप में मान

मान	विवरण
`xx-small`	सबसे सबसे छोटा। उदाहरण: Lorem ipsum dolor sit amet.
`x-small`	सबसे छोटा। उदाहरण: Lorem ipsum dolor sit amet.
`small`	छोटा। उदाहरण: Lorem ipsum dolor sit amet.
`medium`	मध्यम। उदाहरण: Lorem ipsum dolor sit amet.
`large`	बड़ा। उदाहरण: Lorem ipsum dolor sit amet.
`x-large`	बहुत बड़ा। उदाहरण: Lorem ipsum dolor sit amet.
`xx-large`	सबसे बड़ा। उदाहरण: Lorem ipsum dolor sit amet.
`larger`	पैरेंट के फ़ॉन्ट से कुछ मान अधिक।
`smaller`	पैरेंट के फ़ॉन्ट से कुछ मान कम।

डिफ़ॉल्ट मान: medium.

उदाहरण

आइए पैराग्राफ़ का फ़ॉन्ट आकार 20px पर सेट करें:

<p>
	Lorem ipsum dolor sit amet.
</p>

p {
	font-size: 20px;
}

उदाहरण

इस उदाहरण में, पैराग्राफ के लिए आकार 16px पर सेट है, और उसके अंदर के span के लिए - 150%। इस मामले में span का फ़ॉन्ट आकार उसके पैरेंट, यानी पैराग्राफ का 150% होगा, और उसका वास्तविक आकार 16px * 150% = 24px होगा:

<p>
	Lorem <span>ipsum dolor</span> sit amet.
</p>

p {
	font-size: 16px;
}
span {
	font-size: 150%;
}

उदाहरण

इस उदाहरण में, पैराग्राफ के लिए आकार 16px पर सेट है, और उसके अंदर के span के लिए - larger। इस मामले में span का फ़ॉन्ट आकार उसके पैरेंट (पैराग्राफ) से अधिक होगा:

<p>
	Lorem <span>ipsum dolor</span> sit amet.
</p>

p {
	font-size: 16px;
}
span {
	font-size: larger;
}

उदाहरण

ध्यान दें कि अलग-अलग font-family वाले फ़ॉन्ट और समान font-size दृश्य रूप से बिल्कुल एक ही आकार के नहीं हो सकते (इस समस्या के समाधान के लिए font-size-adjust प्रॉपर्टी देखें)।

नीचे दिए गए उदाहरण में दोनों पैराग्राफ़ को font-size 16px पर सेट किया गया है, लेकिन अलग-अलग font-family हैं:

<p id="elem1">
	Lorem ipsum dolor sit amet.
</p>
<p id="elem2">
	Lorem ipsum dolor sit amet.
</p>

#elem1 {
	font-size: 16px;
	font-family: Arial;
}
#elem2 {
	font-size: 16px;
	font-family: "Times New Roman";
}