Logó{CSS3 Tutoriál}

Betûk

A betûtípus beállítása

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õ nem támogatja az elsõ betûtípust, akkor a listában a következõt próbálja majd meg beállítani. A lista végén egy betûcsaládot kell 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. Abban az esetben, ha a használni kívánt betûtípus neve több szóból áll, idézõjelek vagy aposztrófok közzé kell tenni.

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 egyenlõ területet foglal el, így gépelt 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.

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, ezért mind a tulajdonságot, mind a felsorolt értékeket támogatják a jelentõs böngészõk.

Példa:



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 valamely megtalálható. Sajnos a különbözõ operációs rendszerek nem sok közös betûtípussal rendelkeznek. Szerencsére erre is van megoldás. Eltárolhatunk betûtípusokat a web-szerveren é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.

Saját betûtípusok megadása a @font-face segítségével:
  • A CSS szabályt a @font-face kulcsszóval vezetjük be, amit egy {} zárójelekbõl álló blokk követ, amelyben meg kell adnunk a használni kívánt betûtípust és annak elérési útját.
  • A blokk elejére a font-family tulajdonság kerül, aminek a beimportálandó betûtípus nevét adjuk értékül. Késõbb ezzel a névvel hivatkozhatunk majd rá. Az érték után ne felejtsük el, a deklarációt záró pontosvesszõt.
  • Ezután a betûtípusunk az IE által támogatott EOT kiterjesztésû fájljának elérési útja következik. src: url('mappa/betûtípus.eot');
  • Ekkor félre kell vezetni az IE-t, hogy ne jelezzen hibát a többi formátumú betûtípus fájlra. Azt használjuk ki, hogy az IE figyelmen kívül hagyja a helyi forrás attribútumot, így az ezt követõ további kódrészletet átugorja. Gépeljük be a következõ lokális elérési utat: src: local('Ð'),
  • Ezután megadjuk a többi böngészõ számára is használható woff és ttf betûtípusok elérési útját: url('mappa/betûtípus.woff') format('woff'), url('mappa/betûtípus.ttf') format('truetype'), url('fonts/Chunkfive.svg') format('svg');

Példa:



A betûméret beállítása

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

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, large, x-large, xx-large. A böngészõkben a medium az alapértelmezett méret. Ezen kívül abszolút hosszúságértékeket is megadhatunk.
  • Módunkban áll relatív érték megadására is a smaller, larger kulcsszavakkal.
  • Megadhatunk relatív hosszúságértékeket, és százalékos értékeket is.

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, ezért mind a tulajdonságot, mind a felsorolt értékeket támogatják a jelentõs böngészõk.

Példa:



A font-size-adjust

Van egy másik tulajdonság is, amivel a betûméretet állíthatjuk be. Ez a font-size-adjust. A hatása abban tér el a font-size-tól, hogy vele a betûméretet a kisbetûkhöz viszonyítva adhatjuk meg. Ez azért jó, mert amúgy két azonos méretû, de különbözõ betûtípusba tartozó kisbetûk mérete gyakran eltérõ. Így a különbözõ alternatív betûtípusokra is egységesebb megjelenés kölcsönözhetõ a weblapnak. Értékül egy nullánál nagyobb arányszámot kell megadni, ami megadja, hogy hányad része legyen a kisbetûk mérete a font-size értékének. Lehetséges érték még a none, ami alapértelmezésre állítja a betû méretét.

Tulajdonságok:

A font-size-adjust tulajdonság értékei nem öröklõdnek.

A tulajdonság a CSS3 szabvány része. Jelenleg csak a Firefox böngészõ támogatja.

Példa:



Dõlt betûk

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õ. Néhány böngészõ nem tesz különbséget a két érték között.
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.

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, ezért mind a tulajdonságot, mind a felsorolt értékeket támogatják a jelentõs böngészõk.

Példa:



A betûsúly beállítása

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

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 az aktuális éré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.

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, ezért mind a tulajdonságot, mind a felsorolt értékeket támogatják a jelentõs böngészõk.

Példa:



Kiskapitálissá tétel

A font-variant tulajdonság segítségével betûinket kiskapitálissá tehetjük.

Ha a font-variant tulajdonságnak small-caps értéket adjuk, akkor a teljes szöveget nagy betûsre állítja, de úgy, hogy az elsõ betû magasabb legyen, mint a többi. Ez címeknél néha jól mutat.
Ezen kívül értékül adhatjuk a normal értéket is, ami normál szövegstílust eredményez.

Tulajdonságok:

A font-variant tulajdonság értékei öröklõdnek.

A tulajdonság már a CSS1 szabványnak is része volt, ezért mind a tulajdonságot, mind a felsorolt értékeket támogatják a jelentõs böngészõk.

Példa:



A font gyorstulajdonság

A font gyorstulajdonsággal az eddigi tulajdonságokat, egyszerre állíthatjuk be.

Értékül az egyes tulajdonságoknál bemutatott értékeket adhatjuk. Amely opcionális tulajdonságoknak nem kívánunk értéket adni, azokat szabadon kihagyhatjuk a paraméterlistából.

Az értékek sorrendje:

  • Opcionálisan megadhatjuk a font-style-t.
  • Opcionálisan megadhatjuk a font-variant-ot.
  • Opcionálisan megadhatjuk a font-weight-et.
  • Ki kell töltenünk a font-size-t.
  • Opcionálisan megadhatjuk a line-height-et, ami elé egy / jel kerül.
  • Ki kell tölteni a font-family-t.
  • A következõ értékekkel rendszerfüggõ default (alapértelmezett) betûbeállításokat érhetünk el:
    • A caption a szöveggel rendelkezõ kontrollerek betûstílusa.(gombok, stb.)
    • Az icon az ikonok címkéihez használt betûstílus.
    • A menu a menükhöz használt betûstílus.
    • A message-box a párbeszédpanelekhez használt betûstílus.
    • A small-caption kisméretû kontrollerekhez használt betûstílus.
    • A status-bar a státuszbárokhoz tartozó betûstílus.
  • Az inherit segítségével a betûstílust a szülõ elemtõl örökölhetjük.

Tulajdonságok:

A font gyorstulajdonság értékei öröklõdnek.

A tulajdonság már a CSS1 szabványnak is része volt, ezért mind a tulajdonságot, mind a felsorolt értékeket támogatják a jelentõs böngészõk.

Példa:



Feladat:

Egészítsd ki a példakódot stílus szabályokkal úgy, hogy a képpel megegyezõ végeredményt kapj!

Betûs feladat.


Tárnok Tamás Attila - CSS3 Tutoriál - 2010