Свойство font-family

Свойство font-family задава типа на шрифта.

Синтаксис

селектор {
	font-family: име на шрифта;
}

Забележка

Ако името на шрифта съдържа интервали, например, Times New Roman, то трябва да се огради в единични или двойни кавички.

Забележка

Може да се изброят няколко подобни шрифта чрез запетая. Когато браузърът срещне първия шрифт в списъка, той проверява дали е наличен на компютъра на потребителя. Ако такъв шрифт няма, взема се следващият шрифт от списъка и също се проверява за наличие. Затова няколко шрифта увеличават вероятността, че поне един от тях ще бъде открит на клиентския компютър.

Списъкът обикновено завършва с ключова дума, която описва типа на шрифта (всички шрифтове принадлежат към някакъв тип) - serif, sans-serif, cursive, fantasy или monospace. Ако браузърът не намери нито един от посочените шрифтове на компютъра на потребителя, той ще избере един от шрифтовете на посочения тип.

Типове шрифтове

Тип	Описание
`serif`	Шрифт със серифи.
`sans-serif`	Шрифт без серифи.
`cursive`	Курсивен шрифт.
`fantasy`	Декоративен шрифт с красиви завъртулки и необичайни ефекти.
`monospace`	Моноширен шрифт, при който ширината на всеки символ е еднаква.

Стойност по подразбиране: шрифтът, зададен в браузъра по подразбиране. Обикновено това е Times New Roman.

Пример

Нека зададем на шрифта семейство Arial:

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

p {
	font-family: Arial;
}

Пример

Нека зададем на шрифта семейство Times New Roman. Тъй като името на шрифта се състои от няколко думи, то го поставяме в кавички:

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

p {
	font-family: "Times New Roman";
}

Пример

Нека зададем на шрифта шрифт от групата serif (най-вероятно ще се избере Times New Roman):

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

p {
	font-family: serif;
}

Пример

Нека зададем на шрифта шрифт от групата sans-serif (най-вероятно ще се избере Arial):

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

p {
	font-family: sans-serif;
}

Пример

Нека зададем на шрифта шрифт от групата fantasy (при вас може да не работи поради липса на такъв шрифт):

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

p {
	font-family: fantasy;
}

Пример

Нека зададем на шрифта шрифт от групата monospace (буквите ще станат с еднакъв размер):

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

p {
	font-family: monospace;
}