Kiss Honlapkészítés elérhetőség ikoninfo@kisshonlapkeszites.hu

Kiss Honlapkészítés telefon ikon + 36 70 252 4759

Egyedi honlapkészítés Győr

weboldal-keszites

Weboldal készítés,
Webdesign készítés,
Honlap karbantartás
latogatottsag-noveles
Látogatottság növelés,
Keresőoptimalizálás (SEO),
Bevételt termelő honlapkészítés

webaruhaz-keszites

Webáruház készítés,
Webshop készítés,
Webshop karbantartás

Egyedi betűkészletek használata honlapokon

Olvasóink értékelése: 5 / 5

Csillag aktívCsillag aktívCsillag aktívCsillag aktívCsillag aktív
 

 

Font fájl beillesztése honlapkészítéskorAhogy 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.

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.


<< Tudjon meg többet a Google Pingvinről!

Blog címlap

Szöveg árnyékolása CSS3-al >>

 

 


Tippek röviden

  • Mit nevezünk minőségi tartalomnak? 2016-02-06

    A minőségi tartalom egy blog, vagy bármilyen weboldal esetében rendkívül fontos, hiszen ez elsődleges rangsorolási szempont a különböző...

  • Google Webmester Eszközök - azaz GWT 2016-01-16

    A GWT, vagyis Google Webmaster Tools, magyarul Google Webmester Eszközök egy rendkívül jó eszköz, amely teljesen ingyenes, és integrálni tudja...

  • Weboldal ereje számokban 2015-12-10

    A PageRank értéke az a mérőszám, amit már 1998-tól egy oldal erősségével kapcsolatos legfontosabb értékként kezelnek az internetezők, hiszen Larry...

Blog

honlapkeszites-arajanlat-keres-tablet

KÉRJEN EGYEDI ÁRAJÁNLATOT!

Nincs értelme tovább várnia! Vegye fel velem a kapcsolatot az alábbi űrlap segítségével, vagy hívjon a +36 70 252 4759-es telefonszámon.

Powered by ChronoForms - ChronoEngine.com