Својството 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";
}