A webfejlesztés egyik legalattomosabb buktatója az egyedi fontok használata. A fejlesztő gépén jellemzően hemzsegnek a különböző fontok, elég csak feltenni egy Adobe terméket. De mi a helyzet az irodai gépekkel? 6-8 éve ott csücsül a gépen egy Windows, amit a rendszergazda telepített valószínüleg az Office egyik többé kevésbbé legális példányával meg esetleg egy könyvelőprogrammal. Aztán a felső vezetés utasítására biztonságossá tette a gépet. Ez általában gátat szab programok telepítésének, de könnyedén lehet a procedúa kellemetlen mellékhatása, hogy a felhasználók fontokat sem tudnak telepíteni - nem mint ha a nagyrészük tudná mi az.

Ilyen környezetben a mindenhol jól mutató honlap úgy fest majd - természetesen IE 6 alatt megnyitva -, mint egy world dokumentum. Ezt elkerülendő lehetőség van betűtípusokat ágyazni a CSS-be. Ennek eszköze a @font-face. Meglepő módon ezt a funkciót a Microsoft vezette be, így már IE 4 -ben is elérhető, míg a két fontos Windows konkurens csak a 3.5 (Firefox) és a 10 (Opera) verzióktól támogatják. A @font-face használata meglehetősen egyszerű

@font-face {
   font-family: myFont;
   src: url(my_font.ttf);
}Érthetetlen módon azonban míg az Opera, Firefox és Webkit a TrueType/OpenType TT (.ttf) formátumot használja, addig a Microsoft a saját Embedded OpenType (EOT) szabványához ragaszkodik. Az átjárás - a licensz-problémáktól eltekintve - egyszerű, ttf-ből eot-et akár a weben is lehet csinálni. Mivel azonban két url-t nem lehet megadni a @font-face-ben, ezért két font típust kell importálni, egyet ttf-ből, egyet pedig eot-ből. Ahol az adott fontot használjuk, ott pedig mindkét típust fel kell sorolni. Hasznos trükk hogy ha sok fontot szeretnénk használni több stíluslapon keresztül, akkor a @font-face definíciókat érdemes kiszervezni egy külső CSS file-ba.
 

A fontok másik hátulütője a dollár, az ingyenesen elérhető fontok nagyrésze ugyanis nem tartalmaz ékezetes karaktereket, viszont az igényesebb teljes készletekért akár $100-t is elkérhetnek. Kinek van pénze 3-4 betűtipus megvásárolni a honlapjára?! Ráadásul ezek webes használatkor nem is tölthetőek le, a böngészőnek mindig a szolgáltató szerveréről kell előkeresnie majd a font-file-t, és igen kellemetlen, ha ennek elérhetősége korlátozott.

A bejegyzés trackback címe:

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.