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