A font-family tulajdonság
A font-family tulajdonság
a betűtípust állítja be.
Szintaxis
szelektor {
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:
<p>
Lorem ipsum dolor sit amet.
</p>
p {
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:
<p>
Lorem ipsum dolor sit amet.
</p>
p {
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):
<p>
Lorem ipsum dolor sit amet.
</p>
p {
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):
<p>
Lorem ipsum dolor sit amet.
</p>
p {
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):
<p>
Lorem ipsum dolor sit amet.
</p>
p {
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):
<p>
Lorem ipsum dolor sit amet.
</p>
p {
font-family: monospace;
}
: