‘CSS3 font’ címkét tartalmazó cikkek
Sokáig tépelődtem, hogy belefogjak-e, ebbe a poszteres cikkbe. Mert az előző CSS3 @font-face-el foglalkozó után záporoztak a levelek. Egy részében dicsérték az ötletet, hogy foglalkozzunk többet a tipográfiával, egy részében meg ijedten kérdezték, hogy ugye nem fogjuk agyon zsúfolni különböző betűtípusokkal az odalakat amiket készítünk. Azt gondolom a második reakció is teljes mértékben jogos. Hiszen, plusz terhelés a webszervernek, plusz sávszélesség annak aki meg akarja nézni és ráadásul valóban rettenetesen meg lehet csúfítani vele az oldalunkat.
Ami miatt szerintem mégis érdemes ezen gondolkodni, az az, hogy az ésszerű használat és a táblagépek egyre nagyobb elterjedése okán (nézd meg az előző cikk példáját egy táblagépen, szerintem korrekt, jobban mutat mint monitoron), a tipográfia felértékelődése várható. Persze, addig még sok víz lefolyik a Dunán, de ettől a téma nyitott, érdekes és talán megtérül az idő amit rászánunk.
Ebben a cikkben egy egyszerű posztert fogunk elkészíteni, ami akár lehetne egy felhívás, vagy akár egy komplett hirdetés. De ne szaladjunk előre. Egy barátom kérte a héten a segítségem, hogy a cégük hirdetésére szolgáló webes posztert nézzem át és véleményezzem, esetleg dolgozzam át. Ekkor gyúlt a fény és kezdtem vizsgálni a lehetőségét, hogy a CSS3 és a @font-face kombinálásával milyen posztereket lehet készíteni. Ennek az eredményét fogjátok olvasni, sok hozzáfűznivalót, újdonságot az előző cikkek után már nem fogtok tapasztalni, de ettől eltekintve, szerintem érdekes opció. Itt jegyezném meg, hogy @font-face nélkül is lehet ilyet csinálni, mielőtt rám sütitek, hogy: de hiszen ez már a CSS3 elődjeiben is megvolt.
CSS3 poszter
Egészen eddig meglehetősen bonyolult volt a saját betűtípusok használata és a böngészők jobb esetben nem hibával, hanem valami saját betűtípussal cserélték ki az általunk definiáltat. Engedjétek meg, hogy a CSS3-nak bemutassam a font modulját, ami sokaknak már ismerős lesz, de azért remélem mindenki talál benne magának való részt. Természetesen, a CSS1 és CSS2-ben is megtalálható volt a zöme az itt bemutatásra kerülő lehetőségeknek. De pl. a @font-face csak a CSS3-ban tudott igazán teret nyerni. Szerencsére a böngészők is hellyel közzel már támogatják. Az itt bemutatott példákat teszteltem a népszerűbb böngészőkkel (IE, Firefox, Safari, Chrome), azok legfrissebb változatával, tehát ha valami nem jelenne meg jól, akkor itt a lehetőség, hogy frissítsétek a böngészőtöket (http://download.chip.eu/hu/Boengesz__1906.html). Megéri!
@font-face demo
Talán nem kell elmondanom, hogy mennyire siralmas a helyzet, ha tényleg szép weboldalt, egyedi fontokat akarunk használni, erre kínál egy jó megoldást a CSS3 font modulja. Lássuk milyen alapvető lehetőségeink vannak, azokat hogyan használhatjuk. Tovább olvasom »