Designerek Paradicsoma

Legnépszerűbb okosságok

Utolsó kommentek

Végre, végre! Egy nagyon fontos dolog végre lehetővé vált a weboldalak szerkesztésében. Hát persze, hogy az egyedi betűtípusok használatáról beszélek! Mi is volt eddig ezzel a gond?

A böngészők alapesetben nagyon kevés beépített betűkészletet tartalmaznak  - persze a böngésző meg tud jeleníteni bármilyen betűtípust, ami az adott kliens gépen telepítve van, de egyáltalán nem biztos, hogy mindenki, aki az oldalunkat látogatja rendelkezni fog pont azzal az egzotikus betűtípussal, amit mi használtunk...

Tehát a cél adott volt - valahogy kicsikarni azt, hogy bárki nézi az oldalt, azt olyan betűtípussal kiírva lássa, amit a webdesigner megtervezett.

Az adott szöveg képként

Az első probléma megkerülő megoldás az volt, hogy az adott feliratot, szöveget elkészítettük egy grafikai programban, azt képként exportáltuk, és ezt a képet beillesztettük a weboldalba.

Nem is kell részletezni a módszer hátrányait, de azért gyorsan átfutok rajta:

  • Google semmit nem lát belőle, hisz csak egy kép
  • Ha változik a szöveg, vehetem elő a grafikai programot, és készíthetem el újra a szöveget, és exportálhatom képpé
  • A szöveg nem követ semmilyen html objektumot, mindig akkora méretű, amekkorába a grafikai programmal előállítottuk
     

Nyilvánvaló, hogy ennél jobb megoldásra volt szükség!

Trükközés indul: a flash-es megoldás, a sIFR

Páran rájöttek, hogy a flashbe beágyazhatóak azok a betűkészletek, amiket használnak a létrehozásukban, ezért az alapötlet az volt, hogy a szövegblokk, amit ilyen módon egyedi betűtípussal akarunk megjelentetni, legyen egy komplett flash tartalom, és a szöveg dinamikusan állítódjon elő az oldal betöltésekor. Tehát a bemenet egy szöveg, ami átmegy egy flash programocskán, és a kimemet egy flash tartalom lesz, ami a bemeneti szöveget tartalmazza flash-ként a weboldalon. Sőt, a fejlesztők még azt is igérték, hogy a sIFR-el generált szövegeket a google is látja, indexeli. Hát ezt higyjük el Nekik, bár a google flash-be látásáról én még nem vagyok meggyőződve, de mondjuk hogy igaz!

Viszont ez a módszer is egy kicsit nagyobb előkészületeket kívánt, és persze továbbra is ott a gond, hogy amelyik gépen nincs flash plugin a böngészőhöz, azon a felhasználó nem látja az ilyen módon előállított szövegblokkot! (Ez az iphone-ok és ipad-ek terjedésével egyre nagyobb gond, ugye)

Akit bővebben érdekel ez a megoldás itt tud róla olvasni!

Minek a flash, ha van jQuery? A cufon technika

Ez a technika már jóval egyszerűbb. Az eljárás lényege, hogy a szöveget egy jQuery utasítással egy megadott html elemen belül lecseréljük a szintén jQuery-vel előállított (renderelt) egyedi betűtípussal írt szövegre. Az eljárás előnye, hogy mivel javascript alapú megoldás, szinte minden böngészőm működik, és minden böngészőn ugyanolyan eredményt produkál! Sőt, ha megtekintjuk a renderelt weboldal forrását, szövegként látjuk benne az eredeti szövegünket, tehát biztosak lehetünk benne, hogy ezt már a Google is 100%-osan látja és indexeli.

Nagyon remek kis technika és érdemes rászánni pár percet, hogy hogyan működik.

Azokat a file-okat, amit csatolni kell egy generáló oldal állítja nekünk elő az egyedi betűtípusunkból.

Mindent a Cufon technikáról, és a generátorról itt!

... és minek a cufon, ha van CSS3?

A hőn áhított gondtalan betűtípus felhasználást azonban a CSS3 fogja elhozni nekünk! Miért csak fogja? Hát azért, mert a CSS3-at még nem minden böngésző támogatja. Na, ki a kivétel? IIIIInternet Explorer... hát megint nálad nyílt ki a napló... ÜLJLEEGGYES!!!!

Najó, ne legyünk szigorúak, 2-es alá, mert támogatja ám a kis IE8 a @font-face utasítást, de amit az IE8 renderelés néven művel... hát nincs igazán a helyzet magaslatán... Maradjunk annyiban, hogy az IE8-cal renderelt font-face karakterek enyhén szólva kihívással küszködnek... csúnyák na! Ezért a weboldalba senki ne felejtsen el belerakni egy böngésződetektálást, és IE esetén bízza a font renderelést az előbbi cufon technikára.

Elvileg tehát megvalósítható minden ma elterjedt böngészőn az egyedi betűtípus: IE család: cufon technika, mindeki más, CSS3! :)

Hogy hogyan állthatunk be egy font-face-et CSS3-ban, és hogyan lehet azt használni, az alábbi oldalon mindent megtaláltok!

 

A bejegyzés trackback címe:

https://design.blog.hu/api/trackback/id/tr901858550

Kommentek:

A hozzászólások a vonatkozó jogszabályok  értelmében felhasználói tartalomnak minősülnek, értük a szolgáltatás technikai  üzemeltetője semmilyen felelősséget nem vállal, azokat nem ellenőrzi. Kifogás esetén forduljon a blog szerkesztőjéhez. Részletek a  Felhasználási feltételekben és az adatvédelmi tájékoztatóban.

wiktor 2010.04.10. 15:02:48

A sIFR-t - a cufon-hoz hasonlóan - is tökéletesen tudja indexelni a Google, hiszen az is hasonlóan működik mint a cufon, csak másképp jelenít meg.

Kiolvassa a szöveget az elemből és azt adja át a flashnek. Tehát a szöveg itt nincs benne a flashben.

"Once measured, the script creates Flash movies of the same dimensions and overlays them on top of the original elements, pumping the original browser text in as a Flash variable."

Magyar oldalak

Külföldi oldalak

Barátok oldalai





Copyright © 2009 naranchdesign. Minden jog fenntartva.