Szöveg szintű elemeknél gyakran használt stílusbeállítások

A betűtípus beállítása (font-family)

A szövegeink betűtípusát a font-family tulajdonsággal állíthatjuk be.

Értékek

A tulajdonságnak egy vesszővel elválasztott listát adunk értékül. A lista betűtípusok neveit tartalmazza, mégpedig preferált sorrendben. Azaz, ha a böngészőprogram nem tudja az első betűtípus szerint megjeleníteni a szöveget (mert az nincs telepítve a gépre), akkor a listában a következőt próbálja majd meg beállítani. A lista végén egy általános betűcsaládot célszerű megadni, arra az esetre, ha egyik felsorolt betűtípus sincs támogatva. Ekkor ebből a betűcsaládból kerül kiválasztásra egy olyan, amely már támogatva van.

<p style="font-family: 'Times New Roman', Verdana, Serif">Lorem ipsum dolor sit…</p>

Vissza a tartalomjegyzékhez

Néhány betűcsalád

• A Serif családba a talpas betűk tartoznak. Használatuk főleg nyomtatásban ajánlott, mivel a talpak „vezetik” a szemet olvasás közben. Ebbe a családba tartozik például a Times New Roman betűtípus.
• A Sans-serif betűcsalád nem tartalmaz talpakat, ezáltal a megjelenése sokkal modernebb. A képernyőn jobban mutat, mint a Serif betűtípusok, ezért weboldalakra ideális választás. Az Arial betűtípus jó szemléltető példa erre a családra.
• A Monospace betűcsaládban minden karakter azonos szélességű, így írógéppel írt hatást kelt. Lehet talpas, illetve talp nélküli. Viszonylag gyorsan olvasható, ezért rendszerint a különböző szerkesztőprogramok a programkódokat ilyen betűtípussal jelenítik meg. A Courier betűtípus ide tartozik.
• A Cursive betűcsaládba tartozó betűtípusok a kézírást próbálják leutánozni. Nehezen olvashatók, ezért általában csak dekoratív célokat szolgálnak.
• A Fantasy családhoz tartoznak azok a betűtípusok, amelyek betűket ábrázolnak azonban mégsem sorolhatók egyik előző kategóriába sem. Dekoráció céljából használják őket.

Vissza a tartalomjegyzékhez

Tulajdonságok

A font-family tulajdonság értékei öröklődnek. A tulajdonság már a CSS1 szabványnak is része volt. A betűtípusok nevében nem számít a kis- és nagybetű közti különbség a szabvány szerint.

Egyedi (saját) betűtípusok használata

Ha az előbb bemutatott módon állítjuk be a megjelenítendő szövegeink betűtípusát, akkor arra kell hagyatkoznunk, hogy a felhasználó gépén ezek közül valamelyik megtalálható. Sajnos a különböző operációs rendszerek nem sok közös (azonos nevű) betűtípussal rendelkeznek. Szerencsére erre is van megoldás. Eltárolhatunk betűtípusokat a webszerveren és a @font-face segítségével beimportálhatjuk őket. De mivel a különböző böngészők különböző formátumokat támogatnak, mindegyikre külön-külön gondolni kell.

Ezért az egyszerűség kedvéért most azt mutatjuk meg, hogy hogyan lehet például a Google Fonts szolgáltatást igénybe venni egyedi betűtípus használatához.

Az oldalon több szempont szerint is szűrhetjük a betűtípusokat. Ehhez a Filters szakaszban kell kiválasztani a megfelelő kategóriákat. Az előnézeti szöveg (Preview Text) mezőbe érdemes begépelni olyan teszt szöveget, amely ékezetes betűket is tartalmazza, hogy lássuk, hogy az adott font támogatja ezeket. A teszt szöveg lehet például: árvíztűrő tükörfúrógép.

Ezek után ki kell választanunk a nekünk megfelelő betűtípust, és a gyors használat (Quick use) ikonra kattintva máris megkapjuk azt a kódot, amellyel a betűtípust belinkelhetjük, vagy importálhatjuk a weboldalunkra.

A betűméret beállítása (font-size)

A betűméretet a font-size tulajdonsággal állíthatjuk be.

Vissza a tartalomjegyzékhez

Lehetséges értékek

• Lehetőségünk van abszolút méret megadására. Ezek növekvő sorrendben:
  • xx-small
  • x-small
  • small
  • medium (ez az alapértelmezett)
  • large
  • x-large
  • xx-large.
• Módunkban áll relatív érték megadására is a smaller, larger kulcsszavakkal.
• Megadhatunk hosszúságértékeket (pl. 12px)
• Továbbá százalékos értékeket is. (pl. 120%)

Vissza a tartalomjegyzékhez

Tulajdonságok

A font-size tulajdonság értékei öröklődnek. A tulajdonság már a CSS1 szabványnak is része volt.

Dőlt betűk (font-style)

A font-style tulajdonság segítségével dőltté tehetjük betűinket.

A CSS két módot is kínál dőlt betűs szövegek létrehozására.

• Az egyik módszer, hogy a font-style tulajdonságnak az oblique értéket adjuk. Ekkor a szöveg dőlt stílusúvá válik.
• A másik módszer, hogy a font-style tulajdonságnak az italic értéket adjuk értékül. Ekkor a böngésző kiválasztja az aktuális betűtípus dőlt variánsát, amennyiben az fellelhető.
• Van egy harmadik értéke is a font-style tulajdonságnak, a normal, ami normál stílusúra állítja a betűstílust.

Vissza a tartalomjegyzékhez

Tulajdonságok

A font-style tulajdonság értékei öröklődnek. A tulajdonság már a CSS1 szabványnak is része volt.

A betűsúly (vastagság) beállítása (font-weight)

A font-weight tulajdonság segítségével a betűink súlyát állíthatjuk be.

Vissza a tartalomjegyzékhez

A lehetséges értékek

• A bold segítségével félkövérré tehetjük szövegünket.
• A normal érték segítségével normálisra állíthatjuk a szöveg megjelenését.
• A teltséget relatív módon is megadhatjuk a bolder illetve lighter értékkel. Ezek a szülő elem értékhez képest növelik, vagy csökkentik a betűk súlyát, amennyiben ez lehetséges.
• A teltséget számértékekkel is megadhatjuk, 100-tól 900-ig a száz többszöröseinek segítségével. Mivel azonban a legtöbb betűtípusnak nincs kilenc különböző betűsúlyú variánsa, ezért a különböző értékek kevesebb, mint kilencféle különböző eredményt adnak.

Vissza a tartalomjegyzékhez

Tulajdonságok

A font-weight tulajdonság értékei öröklődnek. A tulajdonság már a CSS1 szabványnak is része volt.

Vissza a tartalomjegyzékhez