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