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