Свойство font-family

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

Синтаксис

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

Забележка

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

Забележка

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

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

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

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

Пример

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

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

cssp {
  font-family: Arial;
}

Результат:

Пример

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

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

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

Результат:

Пример

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

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

cssp {
  font-family: serif;
}

Результат:

Пример

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

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

cssp {
  font-family: sans-serif;
}

Результат:

Пример

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

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

cssp {
  font-family: fantasy;
}

Результат:

Пример

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

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

cssp {
  font-family: monospace;
}

Результат: