Egyedi honlap és webáruház készítés Győr

Egyedi betűkészlet használata honlapokon

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.

Egyedi betűkészlet használata honlapokon

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.Fontkészlet hozzáadása

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.

Magyar karakterkészlet beállítás-képernyőkép

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.Karakterkészlet letöltése-képernyőkép

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.

Készült: 2015-12-23

Kapcsolódó hírek, hasznos tippek


Kérjen egyedi árajánlatot!

Az ajánlatkérés kötelezettségektől mentes, csapatunk maximum 48 órán belül válaszol minden beérkező üzenetre. Munkáinkra szerződéses garanciát vállalunk, nem tűnünk el, ügyfeleink bízhatnak bennünk és számíthatnak ránk.

Bízza ránk Ön is webes ügyeinek intézését!

További elérhetőségeink

Kérjük, jelölje be az alábbi négyzetet: