Egyedi betűk használata weben


Sajt fontok használata JavaScript és Canvas elem használatával böngésző függetlenülBiztos láttál már olyan weboldalt, ahol gyönyörű szép betűkkel voltak kiírva a szövegek, címek. Lehet hogy azt gondoltad, hogy ezeket kézzel, rajzoló program segítéségével megírták, de tévedsz!

A legtöbb saját font készlettel kiírt szövegezés JavaScript könyvtárak segítéségével készül, méghozzá nem is gondolnád milyen egyszerűen.



Több lehetőségünk van a megvalósításra, de én kettőt emelnék ki a sorból. Az egyik A typeface.js a másik a Cufon. Mindkettő használata rendkívül jól dokumentált és rengeteg példát mutatnak a felhasználára.

Mindkettő hasonlóan működik. Van egy TTF, OTF, egyéb .. fontod, azt át kell alakítani SVG fonttá. A JavaScript eszköz, ezeket fogja használni és HTML Canvas elemre kiírja a szöveget, majd kicseréli a Te szövegedet erre. Itt felhívnám a figyelmedet arra, hogy a legtöbb Neten található fontkészlet erősen fizetős kategória.

A kicserélt elemre effekteket tehetünk, azokon ugyan úgy működnek az események és részben a CSS beállítások is figyelembe lesznek véve.

Az TTF, OTF font átalakításról:

Letölthető egy generátor hozzá, amit Linuxra egyszerűen feltelepíthetsz, és helyben végezheted el az átalakítást. Ehhez 1 függőséget kell legyűrni, Illetve LAMP (Apache, PHP) kell hozzá:

  1. sudo apt-get install fontforge

A generátorban:

  • Válaszd ki a fontot
  • Nevezd el úgy, hogy erre később hivatkozni fogunk
  • Lehetőleg ha Latin2 szövegeket fog kiírni tartalmazza az ékezetes betűket is, mert ez okozhat meglepetéseket.

Hogyan kell beilleszteni az oldalba:

Töltsd le a Cufon-t, a letöltésben láthatod a példa programokat is.

Árnyékolt betűk létrehozása

  1. <script type="text/javascript" src="/js/cufon.js"></script>
  2. <script type="text/javascript" src="/js/sajat-fontod.font.js"></script>

Itt ha generáláskor megadtad a sajat-fontod, később ezzel hivatkozol rá. Ha nem tudod mivel kell hivatkozni a font családra, akkor keress rá a JS fájlodban a font-family kifejezésre.

A h2 HTML tag-eket szeretnénk árnyékkal és saját betűvel kiírni:

  1. Cufon.replace('h2', {
  2. color: '#AF1D00',
  3. textShadow: '#aaa +2px +2px, #f7f7f7 0px 0px',
  4. hover: true,
  5. hoverables: true,
  6. fontSize: '26px',
  7. textTransform: "none",
  8. forceHitArea: true,
  9. fontFamily: "sajat-fontod",
  10. fontStretch: "110%"
  11. });

A Mya5.hu oldalon használtam a Cufont, színátmenettel

 A Cufon valamelyest figyelembe veszi a stílus definícióidat, de jobb ha a beállításait áttanulmányozod. Nézd meg működés közben a mya5.hu oldalon, ahol nyílt forráskódú és ingyenes szoftveres alternatívákról olvashatsz.

 


Font, CSS, jQuery font, javascript, jquery








Hozzászólás beküldése:


http://domain.tld (nofollow) 
 _   _  _____  _  _  _____  ____  ____ 
( )_( )(  _  )( \/ )(  _  )(  _ \( ___)
 ) _ (  )(_)(  \  /  )(_)(  ) _ < )__) 
(_) (_)(_____)  \/  (_____)(____/(____)



 
 
 
 
Powered By: PHP, Smarty, MySQL, CodeIgniter, jQuery, ArtH2O