Operációs rendszerek




Böngészők







Egyedi Fontok

A 2009. decemberi helyzet

A különböző böngészők eltérő módon kezelik ill. jelenítik meg a szerző által stíluslapban megadott egyedi font típusokat a feldolgozás során. Abban azonban egységesek, hogy alapból csak azt a fonttípust jelenítik meg, amelyik a felhasználó gépén telepítve van. A fentiek miatt bizonytalan olyan egyedi, szép fonttípust beépíteni egy-egy oldal forráskódjába, amely nincs benne a támogatott fonttípusok listájában. Ezen hiány pótlására került be a CSS2-be a már korábban kidolgozott @font-face szabály, majd a CSS2.1-ből kivették a böngészőgyártók támogatottságának hiánya miatt. Mivel a CSS3-ba ismét bekerült, talán pár éven belül minden böngésző támogatni is fogja.

A "@font-face szabály"

Ezért a "talán" miatt először néhány szó a @font-face szabállyal kapcsolatban. Az egyedi fontok alkalmazásáról, rövid angol nyelvű történeti áttekintés, alkalmazástechnikai leírás található a "Web Fonts" oldalán. Ugyanitt további információk olvashatóak a "font-face" beágyazás böngésző támogatottságáról, a rendelkézésre álló és a beágyazható kereskedelmi betűtípusokról is.

Alternatív megoldások

Mivel a mai napig, a különböző böngésző gyártók még nem egységesen és teljes körűen alkalmazzák, építik be termékeikbe ezt a technikát, ezért különböző áthidaló megoldások születtek az egyedi fonttípusok weboldalon történő megjelenítésére. Egy viszonylag átfogó összesítő található a Zoe Mickley Gillenwater oldalán az elterjedtebb megoldásokról. Az itt felsorolt megoldások közül mutatok be néhányat, melyeket sikerült érdemlegesen kipróbálnom.

Az itt bemutatott megoldások tesztelve:

(Opr: WindowsXP  ›››  Böngésző: Firefox 3.5.5,  Opera 10.10, IE 6.0, Chrome 4.0.223.16 alatt)
(Opr: Mac OS X 10.5.8  ›››   Böngésző: Safari 4.0.4 5531.21.10 alatt)
(Opr: Ubuntu 9.04 Jaunty  ›››   Böngésző: Opera 10.10 alatt)

"CSS Font-face" teszt

A megoldás kivitelezése viszonylag egyszerű, nem igényel nagy mennyiségű plusz forráskódot. Mint itt a teszt oldalon is látható, a betűtípusok változtathatósága érdekében PHP-val generált pár böngészőfüggő CSS-sor megírása és a *.eot plusz *.ttf font-fájlok feltöltése után már működik is. Íme a "CSS Font-face" címszó alatt futtatott kód:

GeSHi Syntax Highlighting 1.0.8.1 © 2004-2007, Nigel McNie, 2007-2008 Benny Baumann.
  1.  
  2.   //aktuális font-típus CSS-beállítás
  3.   echo '<style type="text/css" media="screen">'."\n";
  4.  
  5.   echo '@font-face {'."\n";
  6.   echo 'font-family:"'.$font_Names[$aktual_font].'";'."\n";
  7.   switch ($aktual_browser)
  8.   {
  9.     case "ie":
  10.       echo 'src: url("fonts/'.$font_Files[$aktual_font].'.eot");'."\n";
  11.       break;
  12.     case "opera":
  13.       echo 'src: url("fonts/'.$font_Files[$aktual_font].'.ttf") format("truetype");'."\n";
  14.       break;
  15.    default:
  16.       echo 'src: local("'.$font_Names[$aktual_font].'"), url("fonts/'.
  17.                              $font_Files[$aktual_font] .'.ttf") format("truetype");'."\n";
  18.       break;
  19.   }
  20.   echo '}'."\n";
  21.  
  22.   echo 'div.multi{'."\n";
  23.   echo 'text-align:left;color:black;direction:ltr;text-indent:20px;font-size:18px;'."\n";
  24.   echo 'font-family: '.$font_Names[$aktual_font].', Arial, helvetica, sans-serif;'."\n";
  25.   echo '}'."\n";
  26.  
  27.   echo '.image-leftbox{'."\n";
  28.   echo 'position:relative;float:left;border-style:none;margin:0;padding:0 10px 0 0;'."\n";
  29.   echo '}'."\n";
  30.  
  31.   echo 'h1{'."\n";
  32.   echo 'font-family: '.$font_Names[$aktual_font].', Arial, helvetica, sans-serif;'."\n";
  33.   echo '}'."\n";
  34.  
  35.   echo 'h3, span.kereso{'."\n";
  36.   echo 'font-family: '.$font_Names[$aktual_font].', Arial, helvetica, sans-serif;'."\n";
  37.   echo 'font-size:16px;'."\n";
  38.   echo '}'."\n";
  39.  
  40.   echo '</style>'."\n";
  41.  
  42.  

Az Opera és IE esetében mint látható, egy kicsit másképp kellett megadni az "src" paramétert, mint a többinél.
Az IE -nek nem *.ttf (True TypeFont) vagy *.otf (Open TypeFont), hanem *.eot (Embedded OpenType) fájl kell. (ezért kell egy fontot két változatban feltölteni a kiszolgálóra!)
A CHROME csak akkor jeleníti meg ezzel a módszerrel az egyedi fontokat, ha a következő paraméterrel futtatom (opr: windows esetén), ami egy átlag felhasználótól nem várható el:

chrome.exe --enable-remote-fonts

A Mac OS X/Safari esetében az űrlap elemekre (<select> és <input>) megadott egyedi fon-stílus nem érvényesül (a beállításokban erre vonatkozó módosítási lehetőséget nem találtam).
A fentebb jelzett opr/böngésző variációkkal kapcsolatban van tesztelési tapasztalatom. Ezekben az esetekben az említett feltételekkel (Firefox3.5, Opera10, IE4.0, Safari3.1 fölött és Chrome3.0 fölött kapcsolóval) láthatóan kiválóan és gyorsan működött a megoldás, betűtípusok közötti váltás esetén is.
Összegezve a tapasztalataimat: Ma számomra ez lenne a legjobb megoldás, persze csak akkor ha már a számítógépek többségén a fent említett böngésző verziók futnának. Azonban nem javaslom általánosan a módszer alkalmazását, mivel nincs garantálva a felhasználók többségénél a stabil, verzió független működés.

"JS Cufón-font" teszt

A megoldás kivitelezése egy kicsit több munkát igényel, mint az előző. Először le kell tölteni az alábbi JS fájlokat:     
jquery.min.js     cufon-yui.js
Következő lépésként a Cufón Generátor segítségével a használni kívánt font-fájlokból létre kell hozni a szükséges XX.font.js fájlokat. A letöltött két fájlt és a generált font-fájlt kell a szerverre feltölteni a működés érdekében.
Az oldal forráskódjának <head> részében meg kell hívni a feltöltött JS -fájlokat, majd be kell állítani a szükséges elemekre a kívánt font-típust. Beállításkor egy adott egyedi fontra az eredeti *.ttf font fájlban vagy a generált XX.font.js fájlban megnézhető font-névvel, egy adott elemre az "elem / class / id"-vel is lehet/kell hivatkozni.

!!!!
A fájlnevekben kerülni kell az ékezetes karaktereket (ha van, a fájlt átnevezni munkábavétel előtt)! Néhány fontnál előfordult, hogy a generált JS -fájlban rossz formában került be a font neve (ékezet volt a névben). Ilyenkor ki kell javítani a "JS-fájlban" a font-fájlban találhatóra és arra is kell hivatkozni a beállításkor!
!!!!

A különböző beállítási módokat és opciókat a Cufón API oldalon lehet tanulmányozni. Legvégül, mint az alábbi forráskód mintában is látszik a </body> előtt még inicializálni kell a "cufon"-t.

GeSHi Syntax Highlighting 1.0.8.1 © 2004-2007, Nigel McNie, 2007-2008 Benny Baumann.
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="hu">
  4. <head>        
  5.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6.   <meta http-equiv="Content-Language" content="hu" />
  7.   <meta name="robots" content="all" />
  8.   <meta http-equiv="Cache-Control" content="no-cache" />
  9.   <meta http-equiv="Pragma" content="no-cache" />
  10.   <meta http-equiv="Expires" content="0" />
  11.   <title>Cufón teszt</title>
  12.  
  13.   <!-- IE miatt a "cufon-yui.js" előtt meghívni -->
  14.     <!--[if lte IE 7]><script src="js/jquery-1.3.2.min.js" type="text/javascript"
  15.    charset="utf-8"></script><![endif]-->
  16.     <script src="js/cufon-yui.js" type="text/javascript"></script>
  17.   <!-- aktuális font-js fájlok -->
  18.     <script src="fonts/XX.font.js" type="text/javascript"></script>
  19.     <script src="fonts/XY.font.js" type="text/javascript"></script>
  20.   <!-- egyedi font beállítása a szükséges elemekre -->
  21.     <script type="text/javascript">
  22.       Cufon.replace('h1', {fontFamily:'XX', color:'green', fontWeight:'700'});
  23.       Cufon.set('fontFamily', 'XY').replace('div.multi')('div#cim');
  24.     </script>
  25. </head>        
  27.  
  28.   <!-- A teljes tartalmi rész kódsorai -->
  29.        
  30.   <script type="text/javascript">
  31.     Cufon.now();
  32.   </script>        
  33. </body>        
  34. </html>        
  35.  

Az általam kipróbált összeállítások (oprendszer/böngésző) esetén, eddig nem tapasztaltam problémát vagy működési zavart. Egy valamire azért felhívom mindenki figyelmét:

!!!!
Ha egy elemet beállítottunk egy adott betűtípusra, azon belül a tartalom egy részét egy másik elemmel már nem lehet megváltoztatni.
!!!!

Az előző módszerrel, mint a "CSS Font-face" címszó alatt látni, ez is lehetséges (pl: egy <div> elembe elhelyezett <span> elemmel).
Összegezve a tapasztalataimat: Hosszabb szövegek dekoratív megjelenítésére bátran ajánlom megoldásként, nálam eddig minden összeállításban működött. Azonban szerintem csak akkor érdemes több energiát befektetni és feltölteni viszonylag nagyméretű fájlokat a szerverre, ha az összességében megéri. Rövidebb szövegrész esetében (címek, menüpontok, dekorációk) pedig CSS-háttérképként célszerű betölteni egy valamilyen módszerrel létrehozott "font-kép" -et.

"PHP Image-Font" teszt és "Image Creator"

A "PHP GD library" -ban található függvények felhasználásával is lehetséges futás közben *.ttf típusú font-fájlból létrehozni egy képet ill. képfájlt. Az eddigiek közül talán ennek a módszernek a kidolgozása járt számomra a legtöbb munkával, mivel nem találtam az interneten könnyen beilleszthető megoldást. Végül is sikerült elfogadható formában összehozni egy olyan összetett eljárást, amely alkalmas akár futás-időbeni, akár egy kép-generátor alap-elemeként történő felhasználásra. Kissé bonyolultra sikeredett, mivel próbáltam "univerzálissá" kialakítani.
Íme a "PHP Image-Font" és az "Image Creator" címszó alatt futtatott kód:

GeSHi Syntax Highlighting 1.0.8.1 © 2004-2007, Nigel McNie, 2007-2008 Benny Baumann.
  1.  
  2. //A KÉPET LÉTREHOZÓ FÜGGVÉNY TARTALMA VÁZLATOSAN
  3. {
  4.   //BEGIN behúzó szóköz beállítás
  5.     $indent_count = array(""," ","  ","   ","    ","     ");
  6.     $behuzas = ($behuzas > 5)? 5 :($behuzas < 0 ? 1 :$behuzas);
  7.     $indent = $indent_count[$behuzas];
  8.     //behúzó-jel karakter cseréje behúzó szóközökre (preg_replace-vel)
  9.     $szoveg = charswapping($szoveg,$indent);
  10.   //END  behúzó szóköz beállítás
  11.  
  12.   //BEGIN font-szám minimum beállítása
  13.     if (($font_szam < 1) or ($font_szam > 80))
  14.     { $font_szam = 50; }
  15.     else
  16.     { $font_szam = $font_szam; }
  17.   //END font-szám minimum beállítása
  18.  
  19.   //Teljes szöveg befoglaló téglalap kalkuláció
  20.     $_bx = imageTTFBbox($font_meret,0,getcwd().$font_fajl,$szoveg);
  21.  
  22.   //BEGIN sorok számának megállapítása -> $s
  23.     $s = preg_split('/[\n\r]+/',$szoveg);  //tömb a soroknak
  24.     $nL = count($s);  //sorok száma
  25.   //END sorok számának megállapítása
  26.  
  27.   //BEGIN egy-soros minta-szöveg befoglaló téglalap kalkuláció (font függő)
  28.     $abc ="ÁRVÍZTŰRŐ árvíztűrő GÁT gát ";      
  29.     $font_minta = imageTTFBbox($font_meret,0,getcwd().$font_fajl,$abc);
  30.     $font_W=abs($font_minta[2]-$font_minta[0]);
  31.     $font_H=abs($font_minta[5]-$font_minta[3]);
  32.   //END egy-soros minta-szöveg befoglaló téglalap kalkuláció
  33.  
  34.   //egy-két művelet részletek nélkül (nagyméretű kódok)
  35.     //dőlésszög korlátok beállítása
  36.     //képszélesség/képmagasság (beállított/kalkulált)
  37.     //megjelenített képszélesség korlát beállítás
  38.     //a "$im" alap-kép létrehozása
  39.  
  40.     //Végül a "font-kép + árnyék-kép" létrehozása (balra v. középre v. jobbra igazítással)
  41.       foreach($s as $key => $val)
  42.       { //hosszú számolási műveletek után
  43.         imageTTFText($im, $font_meret, $sor_doles, $_X, $_Y, $font_szin, getcwd().$font_fajl, $val);
  44.         if ($arnyek)
  45.         { imageTTFText($im, $font_meret, $sor_doles, $_X+1, $uj_Y+1, $arny_szin, getcwd().$font_fajl, $val); }      
  46.       }
  47.  
  48.   //a műveletek eredménye
  49.     return $im;
  50. }
  51.   //A FÜGGVÉNY MEGHÍVÁSA (a változók magukért beszélnek)
  52.   $szoveg_kep = (imagettfJustifytext($szoveg, $sorok_szama, $font_fajl, $font_szam,
  53.                                      $igazit_hor, $sor_koz, $kep_szeles, $kep_magas,
  54.                                      $kep_magas_kor, $font_meret, $sor_doles,
  55.                                      $font_szin, $arny_szin,$arnyek, $behuzas));
  56.  
  57.   //A FÜGGVÉNY MEGHÍVÁSA UTÁNI LÉPÉSEK
  58.     //másolás local-fájlba
  59.     $szeles = imagesx($szoveg_kep);
  60.     $magas = imagesy($szoveg_kep);
  61.     $szoveg_kep_local = @imagecreate($szeles, $magas);
  62.     imagecopy($szoveg_kep_local, $szoveg_kep, 0, 0, 0, 0, $szeles, $magas);
  63.     imagepng($szoveg_kep_local, 'created-dir/xy.png');
  64.     //erőforrások felszabadítása
  65.     imagedestroy($szoveg_kep_local);
  66.     imagedestroy($szoveg_kep);
  67.  
  68.   //AZ "xy.png" MEGJELENÍTÉS <img> ELEMBEN
  69.     <img class="font-image" alt="" src="created-dir/xy.png" />
  70.      
  71.  
  72.  

A módszerrel létrehozott font-kép felhasználásának előnye, hogy a szerverre feltölteni csak a szükséges képfájlokat kell és CSS -vel beállítani háttérként. Teszt-célú esettől eltekintve futásidőben nem célszerű létrehozni ezzel a módszerrel egyedi fonttal megjelenített tartalmat, mivel plusz letöltési idővel, plusz feltöltendő állományokkal és elég macerás beállítással kell számolni egy-egy kép-fájl kívánt megjelenésének elérése érdekében (a szükséges paraméterek nagyon függnek az adott font-típustól). Erre bárki rájöhet ha kipróbálja a "Image Creator" címszó alatt lévő Font-Kép Kreátor-t. Futás idejű használattal csak abban az esetben érdemes megpróbálkozni, ha egy díszesen megjelenítendő rész tartalmát viszonylag gyakran kell módosítani/cserélni, a függvény többi bemenő paraméterének változtatása nélkül.

Összegezve a tapasztalataimat: Font-képet rövidebb, díszítő jellegű szövegek dekoratív megjelenítésére célszerű alkalmazni. Ez még akkor is igaz lesz, ha a "font-face" szabály támogatottsága általánossá válik a böngészők többségében, mivel nem szükséges font-állományok feltöltése a szerverre (20-30 pár szavas szöveg-kép kisebb méretű, mint egyetlen fontfájl).
!!!!
Opera esetén ha a beállításoknál nincs bejelölve "Az űrlapok stílusa változtatható" sor, akkor az űrlap elemek esetében a háttérként berakott font-kép nem jelenik meg.
!!!!

!!!!
Kérlek ne feledd, hogy neked kell gondoskodni arról, hogy jogod van bármilyen betűtípus használatára!
Sok font gyártó kifejezetten tiltja az újrafelhasználást és a betűtípusok beágyazását. A felelősség a tiéd megbizonyosodni arról, hogy a helyi jogi és szerzői jogi törvényeknek megfelelően jársz el.
!!!!

Módszerek

Web Fonts
Cufón
PHP GD library

Fontok

1001 Free Fonts
Urbanfonts
Dafont
COOLTEXT
Font & Things
Fonts.hu
Fonts101
Fontstock
Schriftarten
Macfonts
Free Fonts
Fontsy
2200 Free Fonts