font-size ගුණය

font-size ගුණය අකුරුවල ප්‍රමාණය සකසයි. ගුණයේ අගය ලෙස ඕනෑම ප්‍රමාණ සඳහා ඒකක (සාමාන්‍යයෙන් px, em හෝ rem) හෝ විශේෂ යතුරු වචන (ඉතා කලාතුරකින් භාවිතා වේ) පවතියි.

වාක්‍ය රචනය

cssතෝරන්නා {
  font-size: අගය;
}

යතුරු වචන ආකාරයේ අගයන්

පෙරනිමි අගය: medium.

උදාහරණය

අපි ඡේදවලට අකුරු ප්‍රමාණය 20px ලෙස සකසමු:

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

cssp {
  font-size: 20px;
}

Результат:

උදාහරණය

මෙම උදාහරණයේදී, ඡේදය සඳහා ප්‍රමාණය 16px ලෙස ද, එහි ඇතුළත ඇති span සඳහා - 150% ලෙස ද ලබා දී ඇත. මෙම අවස්ථාවේදී span හි අකුරු ප්‍රමාණය එහි මව් අංගයේ, එනම් ඡේදයේ, 150% ක් වන අතර එහි සත්‍ය ප්‍රමාණය 16px * 150% = 24px වේ:

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

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

Результат:

උදාහරණය

මෙම උදාහරණයේදී, ඡේදය සඳහා ප්‍රමාණය 16px ලෙස ද, එහි ඇතුළත ඇති span සඳහා - larger ලෙස ද ලබා දී ඇත. මෙම අවස්ථාවේදී span හි අකුරු ප්‍රමාණය එහි මව් අංගයේ (ඡේදයේ) ප්‍රමාණයට වඩා විශාල වේ:

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

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

Результат:

උදාහරණය

විවිධ font-family සහිත හා සමාන font-size ඇති අකුරු දෘශ්‍යමය වශයෙන් සම්පූර්ණයෙන්ම වෙනස් ප්‍රමාණයකින් පෙනෙන බව සලකන්න (මෙම ගැටලුව විසඳීම සඳහා font-size-adjust ගුණය බලන්න).

පහත උදාහරණයේ ඡේද දෙකටම font-size 16px ලෙස ද, නමුත් විවිධ font-family ලෙස ද ලබා දී ඇත:

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

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

Результат: