A tipográfiai tervezés a sikeres weboldal tervezés kritikus fontosságú eleme. Webhelyek létrehozása könnyen olvasható és remekül megjelenő szöveggel minden webdesign szakember célja. Ennek eléréséhez képesnek kell lennie arra, hogy beállítsa azokat a betűtípusokat, amelyeket használni szeretne a weboldalain. Ha meg szeretné adni a betűtípust vagy a betűtípuscsaládot a webdokumentumokban, akkor a font-family style tulajdonságot fogja használni CSS.
A legbonyolultabb font-family stílus, amelyet használhat, egyetlen betűtípust tartalmazna:
p {
font-family: Arial;
}
Ha ezt a stílust alkalmazza egy oldalra, akkor az összes bekezdés megjelenik az "Arial" betűtípus-családban. Ez nagyszerű, és mivel az "Arial" az úgynevezett "web-biztonságos betűtípus", ami a legtöbbet (ha nem az összeset) jelenti számítógépek telepítenék, nyugodtan nyugodhat, ha tudod, hogy az oldal a kívánt módon jelenik meg betűtípus.
Tehát mi történik, ha a kiválasztott betűtípus nem található meg? Például, ha nem használ "web-biztonságos betűtípust" egy oldalon, mit csinál a felhasználói ügynök, ha nem rendelkezik ezzel a betűtípussal? Cserélnek.
Ennek eredményeként néhány mulatságos megjelenésű oldal jelenik meg. Egyszer elmentem egy oldalra, ahol a számítógépem teljes egészében megjelenítette a "Wingdings" (egy ikonkészlet) részben, mert a számítógépemnek nem volt a fejlesztő által megadott betűtípust, és a böngészőm mélységesen választotta, hogy milyen betűtípusként használja a csere. Az oldal számomra teljesen olvashatatlan volt! Itt játszik szerepet a betűkészlet.
Különítsen el több betűtípus-családot vesszővel egy betűkészletben
A "betűkészlet" egy olyan betűtípusok listája, amelyeket használni kíván az oldal. A betűkészletet a kívánt sorrendbe helyezi, és vesszővel választja el őket. Ha a böngészőben nincs az első betűtípuscsalád a listán, akkor megpróbálja a másodikat, majd a harmadikat és így tovább, amíg meg nem találja a rendszeren találhatót.
font-család: Pussycat, algériai, Broadway;
A fenti példában a böngésző először a "Pussycat" betűtípust keresi, majd az "algériai", majd a "Broadway" betűtípust, ha a többi betűtípus nem található. Ez nagyobb esélyt ad arra, hogy legalább az egyik kiválasztott betűtípust használni fogja. Nem tökéletes, ezért van még több, amit hozzáadhatunk a betűkészletünkhöz (olvass tovább!).
Használja az Általános betűtípusokat utoljára
Így létrehozhat egy betűkészletet a betűtípusok listájával, és továbbra sem rendelkezik a böngésző egyikével sem. Nem akarja, hogy oldala olvashatatlanul jelenjen meg, ha a böngésző rosszul választja a helyettesítést. Szerencsére a CSS-nek is van erre megoldása, és hívják általános betűtípusok.
A betűkészlet-listát (még akkor is, ha egy család listája vagy csak webes betűtípusok listája) mindig általános betűkészlettel kell lezárnia. Öt lehet használni:
- Kurzív
- Fantázia
- Monospace
- Sans-serif
- Serif
A fenti két példa a következőkre módosulhat:
betűcsalád: Arial, sans-serif;
vagy.
font-család: Pussycat, algériai, Broadway, fantázia;
Néhány betűtípus-családnév kettő vagy több szó
Ha a használni kívánt betűtípus-család több szóból áll, akkor dupla idézőjelekkel kell körülvennie. Míg egyes böngészők idézőjelek nélkül képesek olvasni a betűtípuscsaládokat, problémák lehetnek, ha a szóközt sűrítik vagy figyelmen kívül hagyják.
font-family: "Times New Roman", serif;
Ebben a példában láthatja, hogy a "Times New Roman" betűkészlet neve, amely több szóból áll, idézőjelekbe van foglalva. Ez azt mondja a böngészőnek, hogy mindhárom szó a betűkészlet nevének része, szemben a három különböző, egyszavas nevű betűtípussal.