A font-family tulajdonság

A font-family tulajdonság a betűtípust állítja be.

Szintaxis

cssszelektor {
  font-family: betűtípus neve;
}

Megjegyzés

Ha a betűtípus neve szóközöket tartalmaz, például Times New Roman, akkor azt egyszemélyes vagy dupla idézőjelek közé kell tenni.

Megjegyzés

Több hasonló betűtípust is felsorolhatunk vesszővel elválasztva. Amikor a böngésző megérkezik az első betűtípushoz a listában, ellenőrzi annak jelenlétét a felhasználó számítógépén. Ha nincs ilyen betűtípus, akkor a következő betűtípust veszi a listából, és szintén ellenőrzi a jelenlétét. Ezért több betűtípus felsorolása növeli annak valószínűségét, hogy legalább egy közülük megtalálható lesz a kliens számítógépén.

A listát általában egy kulcsszóval zárjuk, amely leírja a betűtípus típusát (minden betűtípus tartozik valamilyen típushoz) - serif, sans-serif, cursive, fantasy vagy monospace. Ha a böngésző nem talál egyetlen megadott betűtípust sem a felhasználó számítógépén, akkor kiválaszt egyet a megadott típushoz tartozó betűtípusok közül.

Betűtípus típusok

Típus	Leírás
`serif`	Betűtípus serifekkel (talpakkal).
`sans-serif`	Betűtípus serifek (talpak) nélkül.
`cursive`	Dőlt betűtípus.
`fantasy`	Díszítő betűtípus szép curlikával és szokatlan effektekkel.
`monospace`	Monospace betűtípus, amelyben minden karakter szélessége azonos.

Alapértelmezett érték: a böngészőben alapértelmezetten beállított betűtípus. Általában ez a Times New Roman.

Példa

Állítsuk be a betűtípus családját Arial-ra:

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

cssp {
  font-family: Arial;
}

Результат:

Példa

Állítsuk be a betűtípus családját Times New Roman-ra. Mivel a betűtípus neve több szóból áll, idézőjelek közé tesszük:

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

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

Результат:

Példa

Állítsuk be a betűtípusnak a serif csoportból való betűtípust (valószínűleg a Times New Roman lesz felhasználva):

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

cssp {
  font-family: serif;
}

Результат:

Példa

Állítsuk be a betűtípusnak a sans-serif csoportból való betűtípust (valószínűleg az Arial lesz felhasználva):

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

cssp {
  font-family: sans-serif;
}

Результат:

Példa

Állítsuk be a betűtípusnak a fantasy csoportból való betűtípust (lehet, hogy nem működik, mert nincs ilyen betűtípus rendszerben):

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

cssp {
  font-family: fantasy;
}

Результат:

Példa

Állítsuk be a betűtípusnak a monospace csoportból való betűtípust (a betűk azonos méretűek lesznek):

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

cssp {
  font-family: monospace;
}

Результат: