font-size ගුණය

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";
}