Month: augusztus 2014

Google Font szolgáltatás

Posted on Leave a Comment

Hogyan kell az alap betűtípusoktól megválni, és egyedi betűtípussal megírni a weboldalunk szövegeit?  Google Font szolgáltatás erre kínál megoldást.

Néhány lépés az egész:

  1. Fel kell keresni a Google Fonts oldalt.
  2. Kell keresni egy tetszetős betűtípust.
  3. A betűtípusok alatt van egy nagy kék “Add to Collection” gomb. Emellett balra a 2. gomb egy “Quick-use” feliratú. Erre kell kattintani, majd követni kell az ott leírtakat, az ottani 3-as ponttól kezdve:
  4. A megadott kódsort a weboldal fejlécébe kell tenni.
  5. A betűtípust integrálni kell a weboldal stíluslapjába (css fájl), a megjelölt módon.

A fentiek elvégzése után a stíluslapon megjelölt elemek a kiválasztott betűtípussal fognak megjelenni. Google webfonts

Mire kell figyelni?

Az ékezetekre. Ugyanis nem mindegyik betűtípus tudja kezelni pl. az ű és ő betűket. Ugyan a betűtípusoknál van egy olyan “Pop out” gomb, amellyel megnézhetjük az adott betűtípus karakterkészletét, de ez sajnos sok esetben eltér a tényleges felhasználáskor kapott megjelenítési módtól.

Néhány jó tanács

Minden egyes betűtípus lassíthat a weboldalunk betöltődésén. Érdemes csak a számunkra szükséges stílust és készletet megadni. Az adott betűtípus oldalának jobb felső részében lehet látni (page load), hogy mennyire terhelődhet az oldal.

Három-négy betűtípusnál nem érdemes többet használni egyszerre. Ajánlott az oldal címének, a cikk címének, és a szövegnek adni egyedi betűtípust, ha többfajtát használunk, akkor az ronthat az összhatáson. Ügyeljünk arra, hogy a megfelelő stílusú betűtípust válasszuk (talpas vagy talpatlan).

A nekünk tetsző betűtípusokból gyűjteményt is készíthetünk, ha az adott betűnél az add collectiongombra klikkelünk. Ezt a gyűjteményt elrakhatjuk a könyvjelzőbe (bookmark collection), vagy helyi használatra le is tölthetjük (download collection), ha például a saját gépünkön szeretnénk felhasználni azt.

Egyedi betűk beágyazása weboldalba

Posted on Leave a Comment

Sokaknak jelent problémát az egyedi betűk beágyazása weboldalba, vagy már unják a jól megszokott betűtípusokat a honlapokon, hanem valami olyan betűtípus, amit senki nem használ. Most megmutatjuk hogyan tudtok minden böngészőben megjelenő de mégis egyedi betűtípusokat használni.

UsingCustomFonts

Az úgy nevezett font embedelés, nem egy mai dolog, azonban számos böngésző képtelen volt sokáig lekezelni ezeket az egyedi betűtípusokat így a helyükön a szokásos Times New Román jelent meg. A kor előre haladtával bátran elmondhatjuk, hogy egyedül az Internet Explorer miatt van erre a bejegyzésre igazán nagy szükség mert a többi web browser már igen jól kezeli a TTF (True Type Font) beágyazásokat. Lássuk tehát pár lépésben miként is jeleníthetjük meg írásainkat egyedi betűtípussal az oldalainkon.

    1. Töltsünk le egy ingyenes betűtípust
      Fontos, hogy ingyenes betűtípust szedjünk les hiszen később komoly szerzőjogi vitákba bonyolódhatunk, amihez szerintem senkinek nincs túl sok ingere. Ajánlott oldalak:1001freefonts.com, dafont.com
    2. Miután megvan a betűtípus nézzük meg, hogy a TTF kiterjesztésű mellé csomagoltak-e EOT (Embed Open Type) formátumú fájlt is. Ha nem akkor látogassunk el a TTF to EOT (by kirsle.net) oldalra és konvertáljuk át egy laza mozdulattal a betűtípusunkat.
    3. Most hogy megvan a .ttf és a .eot kiterjesztésű fájlunk is jelen esetben a showcard.ttf és a showcard.eot. Mindkettőt másoljuk fel az FTP-nkre mondjuk egy “font” nevű mappába.
    4. Amennyiben nem használunk css fájlt fogjuk és az oldalunk tagjai közé tegyük be az alábbi minta alapján a saját betűtípusunkat behívó pár sort:

< style>
@font-face {font-family: ‘Sajatbetu’; src: url(‘font/sajatbetu.eot’); src: local(‘☺’), url(‘font/sajatbetu.ttf’) format(‘truetype’); }
body {font-size: 19px; font-family:Sajatbetu;}
< /style>

Sokan biztosan elsőként észreveszik, hogy miért is van a local tag után mosolygós arc. Ennek oka, hogy oda igazából bármit írhatunk, csak ügyelnünk kell arra, hogy egyetlen felhasználónak se legyen olyan nevű könyvtára, hiszen akkor onnét keresné a böngésző a betűtípust. Szerencsére egyetlen operációs rendszer sem hagyja a “mosolygósarc” nevű könyvtárak létrehozását így ez egy biztos karakter, amivel garantált lehet a siker.

  1. Már készen is vagyunk, ha mindent jól csináltunk oldalunkon minden, szöveg Showcard betűtípussal lesz írva.

Természetesen, amennyiben csak bizonyos szöveg részeket szeretnénk kiemelni vagy más betűtípussal írni akkor bármikor a CSS-ünkben hivatkozhatunk a font-family: Showcard attribútummal akár Heading tagoknál akár bárhol máshol. Például:

h1 {font-size: 26px; font-family:Sajatbetu;}