CSS+-+Фонт


 * Претходно: ** CSS - Текст ** Почеток: ** CSS Туторијал ** Следно: **CSS - Врски

Својството за CSS фонтот ја дефинира фамилијата на фонтот, големината, здебеленоста и дизајнот на текстот.

Фамилии на фонтови во CSS
Во CSS, постојат два типови имиња на фамилии на фонтот:
 * generic family - група на фамилии на фонтови со сличен изглед (како „Серифни“ или „Единечен проред“)
 * font family - одредена фамилија на фонт (како „Times New Roman“или „Arial“)


 * Генеричка фамилија || ** Фамилија на фонт ** || ** Опис ** ||
 * Серифни || Times New Roman

Georgia || Серифните фонтови имаат мали линии на крајот од некој карактери ||
 * Несерифни || Arial

Verdana || Овие фонтовии немаат линии на крајот од карактерите ||
 * Единечен проред || Courier New

Lucida Console || Сите карактери имаат иста ширина ||


 * || **Совет:** На компјутерските екрани, несерифните фонтови се сметаат дека се полесни за читање наспроти серифните фонтови. ||

Фамилии на фонтови
Фамилијата на фонтот на текстот е поставена со својството за фамилија за фонт (font-family). Ова својство би требало да содржи неколку имиња на фонт како „fallback“(резервен) систем. Ако пребарувачот не го поддржува првиот фонт, пробува со следниот. Започнете со фонтот кој сакате, и завршете со фонт од генеричка фамилија, за да му дозволите на пребарувачот да одбере сличен фонт во генеричката фамилија, ако ни еден друг фонт не е достапен.


 * Забелешка:** ако името на фонтот е со повеќе од еден збор, мора да биде во наводници, како „Times New Roman“.

Повеќе од еден фонт е дефиниран со разделување со запирка помеѓу нив во листата:

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



Дизајн на фонтот
Својството за дизајнот на фонтот најчесто се користи за дефинирање на закосен текст. Ова својство има три вредности:
 * normal (норамлно) - текстот е нормално прикажан
 * italic (закосен) - текстот е прикажан со закосување
 * oblique (накривен) - текстот „лежи“

p.normal {font-style:normal;} p.italic {font-style:italic;} p.oblique {font-style:oblique;}



Големина на фонтот
Ова својсто ја поставува големината на текстот. Да се може да се контролира големината на текстот е многу важно во веб дизајнот. Не би требало да се користи подесувањето на големината на фонтот за да направите пасосите да изгледаат како наслови, или пак насловите да изгледаат како пасоси. Секогаш користете правилни HTML тагови, како - за наслови и за пасоси. Вредноста на големината на фонтот може да биде апсолутна, или релативна големина. Апсолутна големина:
 * Поставување на дефинирана големина на текстот
 * Не дозволува корисникот да ја менува големината на текстот во сите пребарувачи
 * Апсолутната големина е корисна кога физичката големина од излезниот податок е позната

Релативна големина:
 * Поставување на големината релативна на околните елементи
 * Дозволува корисникот ја менува големината на текстот во пребарувачите

Поставување на големина на фонтот со пиксели
Поставувањето на големината на текстот со пиксели ви дава целосна контрола на големината на текстот:

h1 {font-size:40px;} h2 {font-size:30px;} p {font-size:14px;}

Кодот погоре дозволува пребарувачите Chrome, Internet Explorer 9, Firefox и Safari да ја менуваат големината на текстот. Текстот може да биде променуван во сите пребарувачи со користење на алатката за зумирање (но, ова ја променува целата страница, не само текстот).

Сите својства за фонтот

 * ** Својство ** || ** Опис ** ||
 * font || Ги поставува сите својства на фонтот во една декларација ||
 * font-family || Дефинирање на фамилијата на фонтот за текстот ||
 * font-size || Дефинирање на големината на фонтот ||
 * font-style || Дефинирање на дизајнот на фонтот ||
 * font-variant || Дефинирање дали би требало текстот да биде прикажан со мали букви ||
 * font-weight || Дефинирање на дебелината на фонтот ||


 * Претходно: ** CSS - Текст ** Почеток: ** CSS Туторијал ** Следно: **CSS - Врски