Ahogy fejlődnek a webböngészők, egyre újabb és újabb honlapkészítési technikák látnak napvilágot. Szerencsére mára megváltozott a korábbi tendencia, mely szerint csak alap betűtípusokat lehetett használni weboldalakon. Ebben a leírásban egy viszonylag egyszerű módját mutatom be annak, hogyan használhatunk egyedi karaktereket honlapkészítéskor.
A sötét "(web)középkor"
Kezdetben a webböngészők meglehetősen kevés formázási elem megjelenítésére voltak képesek. Biztosan mindenki emlékszik még a fekete alapon fehér, vagy még rosszabb sárga karakterekkel elkészített weboldalakra.
Ezekben az időkben honlapkészítéskor csak a felhasználók számítógépén is megtalálható általánosn elterjedt betűkészleteket lehetett használni. Egy honlapkészítő nem is álmodhatott egyedi fontok használatáról.
Egyedi fontok használata weboldalakon
Szerencsére ez mára már jelentősen megváltozott. Már korábban is léteztek honlapkészítési technikák egyedi karakterkészlet használatához, a CSS3 megjelenésével azonban már valid honlapokat is készíthetünk egyedi fontokkal. Én a honlapkészítéskor elsősorban az ilyen megoldásokat alkalmazom, mert ezek nem ütköznek a keresőoptimalizálás szabályaiba.
Először is szükségünk van egy használni kívánt font fájlra. Léteznek ingyenesen használható betűtípusok, de vannak amelyekért jogdíjat kell fizetni. A választáskor legyünk körültekintőek, olyan betűkészletet keressünk, melyben megtalálhatóak az egyedi magyar karakterek is.
Ahhoz, hogy honlapkészítéshez használhassuk az egyedi karakterkészletet, át kell konvertálnunk a különböző böngészőknek különböző formátumokra:
- TTF font fájl Firefox 3.5+ , Opera 10+, Safari 3.1+, Chrome 4.0.249.4+ böngészőknek
- EOT font fájl Internet Explorer 4+ böngészőknek
- WOFF font fájl Firefox 3.6+, Internet Explorer 9+, Chrome 5+ böngészőknek
- SVG font fájlt az iPad és iPhone készülékek használják
Szerencsére az konvertáláshoz létezik egy nagyon hasznos webes alkalmazás, a Font Squirrel Font Face Generátor.
Először is töltsük fel a használni kívánt font fájlt az "Add Fonts" gombra kattintva. Ha magyar nyelvű honlaphoz akarjuk használni a betűkészletet, akkor válasszuk az "EXPERT" beállítást.
A magyar karakterkészlet beállításához a "Subsetting" résznél válasszuk a "Custom Subsetting" beállítást, majd a "Language" résznél válasszuk a magyar nyelvet. Ha ezt a lépést kihagyjuk, akkor speciális magyar karakterek nélküli betűkészletet generál a program. Hiába voltak az eredeti fájlban megtalálhatóak a magyar karakterek, ha nem ezzel a beállítással dolgozunk a program eltávolítja azokat.
Ezzel készen is vagyunk, már csak le kell töltenünk a már átkonvertált font fájlokat. Ehhez az oldal alján fogadjuk el a licenszet, jelöljük be az "Agreement" után található checkbox-ot. A letöltéshez kattintsunk a "Download Your Kit" gombra.
Az eredményül kapott zip fájl tartalmából az EOT, SVG, TTF és WOFF fájlokat másoljuk fel weboldalunk gyökérkönyvtárába.
Nincs más hátra, csupán a webszerverre feltöltött font fájlokra kell hivatkoznunk honlapkészítéskor a weboldalunk CSS stíluslapjában. A hivatkozáshoz használjuk a következő kódot:
@font-face {
font-family: 'sajatfont-neve';
src: url('sajatfont-webfont.eot');
src: url('sajatfont-webfont.eot?#iefix') format('embedded-opentype'),
url('sajatfont-webfont.woff') format('woff'),
url('sajatfont-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
A beillesztéshez használhatjuk a letöltött kitben található CSS fájl forráskódját is.
Eredményül egy olyan weboldalt készítettünk, amely megfelel a legújabb CSS3 szabványoknak, minden böngészőn megfelelően jelenik meg. Ezzel a módszerrel valid, gyorsan betöltődő honlapot készíthetünk.
