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

Результат: