ai-font-face

A @font-face szabály

date szeptember 22, 2009 @ 19:47

category Nincs kategorizálva
category , , , , ,

Web designerként az egyik első korlát amibe pályafutásunk elején belefutunk az a web-biztos betűtípusok csekély száma. Hiába az egyik kedvencem a Myriad Pro Light, ha csak a felhasználók töredékének a gépén fellelhető. Ha mégis nagyon ragaszkodom a Myriad Pro Light-hoz, eddig két lehetőségem volt. Vagy képként mentettem el a szöveget – ez a keresők miatt nem jó -, vagy a sIFR technikát alkalmaztam. Az utóbbit olvassa ugyan a kereső, de flash-es, ami néhány helyen blokkolva van.

A CSS 3 @font-face szabálya – bizonyos feltételekkel, de erről majd később – megoldja a problémát. Az alapötlet egyszerű. Fel kell töltenünk a kívánt betűtípus-fájlt egy olyan helyre, ahová hivatkozhatunk a stíluslapunkról, majd azt a forrásfájlt belinkeljük a stíluslapra, például így:

@font-face {
    font-family: "Myriad Pro Light";
    src: url('Myriad-Pro-Light.otf');
}

Ezután már használhatjuk is a Myriad Pro Light betűtípust a stíluslapunkon, és ha nincs meg a felhasználó gépén, akkor a CSS 3 kompatibilis böngészőnk tudni fogja, hogy hol keresse a font-fájlt:

Ez Myriad Pro Light-tal jelenik meg, ha a böngésződ is úgy akarja!

Idáig minden szép és jó volna, de sajnos ez itt még nem a kánaán. Két probléma sötétíti be a @font-face szabály napfényes egét. Az egyik probléma technikai: van amikor nem az jelenik meg, aminek kellene. Bizonyos esetekben a megírt szöveg helyett egy zagyva karakterhalmazt kapunk. Aztán lefrissítjük az oldalt és minden rendben. Aztán lefrissítjük mégegyszer és megint rossz. Ezt sikerült a Firefox-szal és a Safarival is produkálni. Remélhetőleg ezt is megoldják hamarosan.

A második probléma jogi természetű. Jelenleg alig van olyan font, amely licencszerződése engedélyezné a @font-face-es felhasználást. Persze vannak nagyon jó ingyenes fontok is, amelyeknél ez megengedett, de a mainstream designer fontok esetében ez egy komoly korlát. Főleg a fizetős munkáknál, ahol nagyon nem szeretnénk, hogy később az ügyfélt azért zaklassák, mert mi nem olvastuk el a felhasználási feltételeket. De a @font-face-ben akkora lehetőség van, hogy szerintem erre is találnak megoldást.

Ja, és működik mind a 4 CSS 3-as böngészőben: Chrome, Firefox, Opera, Safari. Sőt, még a Konqueror-ban is. Sőt, még az Internet Explorer-ben is (hű, először írom le ezt a nevet ebben a blogban :) ), de hogy ne bízzuk el magunkat, neki .eot formátumban kell a font. Minden más böngésző az .otf és .ttf formátumokat fogadja el, és az .eot-ot nem. De nem kell választanunk, mindkettőt deklarálhatjuk a stíluslapunkban, feltéve, hogy mindkét formátumban megvan a fontunk.