Penggunaan Javascript Font Replacement (Cufon) � ini merupakan javascript yang sering digunakan oleh para web developer untuk merender jenis font yang digunakan secara cepat dan mudah menggunakan fungsi canvas dan VML untuk menggantikan fungsi dari sebuah teks yang menggunakan metode image. Teks yang sudah di replace menggunakan cufon yui akan secara otomatis berubah menjadi canvas, atau secara awamnya teks tersebut sudah tidak bisa di block layaknya seperti sebuah gambar. Apabila di klik kanan pada mouse bisa dilihat menggunakan view image dan secara otomatis teks tersebut sudah convert kedalam sebuah gambar base64 yang bisa anda lihat pada address web browser. Kenapa bisa begitu? Karena Cufon yui adalah javascript yang bisa mengganti jenis font dengan menggunakan fungsi canvas dan VML dari browser kita tanpa perlu flash atau gambar. Cufon terdiri dari dua bagian individu yaitu sebuah generator font yang mengubah font untuk format proprietary dan sebuah mesin rendering yang ditulis dalam javascript. Cara untuk menggunakannnya pun cukup mudah, karena dari situs cufon juga sudah menyediakan tool generator yang siap digunakan untuk merender font atau anda juga bisa secara langsung download jenis font yang sudah ada.Untuk bisa menggunakan cufon, pasang terlebih dahulu kode berikut ini kedalam template blog taruh di atas kode
</head><script type='text/javascript' src='http://cufon.shoqolate.com/js/cufon-yui.js'/>
<script type='text/javascript' src='http://faceblog-evolutions.googlecode.com/files/Vegur_300.js'/>
<script type='text/javascript'>
Cufon.replace('#target_element', { fontFamily: 'Vegur', hover: true });
</script>
Perhatikan pada baris ini:http://faceblog-evolutions.googlecode.com/files/Vegur_300.jsAnda bisa menggantinya dengan URL font lain. Caranya agar lebih mudah bisa langsung download Cufon Kit di [www.cufonfonts.com] kemudian Upload ke Google code atau tempat penyimpanan lainnya yang dapat di gunakan untuk menyimpan file.js
Pada baris ini adalah syntax yang digunakan untuk fungsi merender font:Cufon.replace('#target_element', { fontFamily: 'Vegur', hover: true });Pada#target_elementanda bisa merubahnya dengan elemen yang anda inginkan. Sebagai contoh misalkan untuk merender tagh1,h2,h3maupun#iddan.classtarget maka contoh penulisaannya seperti berikut ini:Cufon.replace('h1, h2, h3, #target_element, .target_element', { fontFamily: 'Vegur', hover: true });Sedangkan padafontFamily: 'Vegur'anda bisa menyesuikannya dengan nama font yang digunakan.
Penggunaan Cufon Lebih Dari Satu
Anda juga bisa menggunakan lebih dari satu jenis cufon untuk target yang berbeda. Misalkan ingin menggunakan dua jenis font yakni Vegur dan Bebas Neue, maka contoh penulisannya seperti dibawah ini:<script src='http://cufon.shoqolate.com/js/cufon-yui.js' type='text/javascript'/>
<script src='http://faceblog-evolutions.googlecode.com/files/Vegur_300.js' type='text/javascript'/>
<script src='http://faceblog-evolutions.googlecode.com/files/bebas-neue.js' type='text/javascript'/>
<script type='text/javascript'>
Cufon.replace('h1, .title', { fontFamily: 'Vegur', hover: true });
Cufon.replace('h2, .sidebar', { fontFamily: 'Bebas Neue', hover: true });
</script>
Agar Cufon Support Internet Explorer (IE)
Pada browser Internet Explorer Cufon tidak bekerja sebagai mana mestinya, karena pada saat pergantian font terjadi jeda (delay). Untuk mengatasi masalah tersebut solusinya tambahkan kode berikut ini diatas tag</body>.<script type='text/javascript'> Cufon.now(); </script>
Demikian artikel tentang Penggunaan Javascript Font Replacement (Cufon) ini dapat kami sampaikan, semoga artikel atau info tentang Penggunaan Javascript Font Replacement (Cufon) ini, dapat bermanfaat. Jangan lupa dibagikan juga ya! Terima kasih banyak atas kunjungan nya.
