Tutorial Blog Mas Andes Official - Tips Blogging | Trik Blogger | Tutorial Blogger | Widget Blogger | Blog Design | Taktik SEO (Search Engine Optimization)

Penggunaan Javascript Font Replacement (Cufon)

Penggunaan Javascript Font Replacement (Cufon) 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.js
Anda 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_element anda bisa merubahnya dengan elemen yang anda inginkan. Sebagai contoh misalkan untuk merender tag h1, h2, h3 maupun #id dan .class target maka contoh penulisaannya seperti berikut ini:
Cufon.replace('h1, h2, h3, #target_element, .target_element', { fontFamily: 'Vegur', hover: true });
Sedangkan pada fontFamily: '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>

Berlangganan artikel via email

14 Response to "Penggunaan Javascript Font Replacement (Cufon)"

Selamat pagi Mas Andes. sudah pagi di suguhi artikel
Yang bermanfaat dan baru buat pengetahuan saya
Ijin belajar dan simak Mas. terima kasih salam sukses :)

Balas

Wah asyik saya dapat subsidi Pertmax dari Mas Andes nih hhh

Balas

mantap nih mas fungsinya...

Balas

wah saya keduluan Mas Karrys nie jadi gak kebagian pertamax deh, gak apa-apa deh periumnya masih kebagian hehehe....

Balas

Terimakasih Mas Ades udah berbagi ilmunya, tar saya coba praktekin nie tapi gak sekarang...saya mau ngantor dulu hehehe....kuli...kuli...biar dapur bisa ngebul :D

Balas

Wah, seru dong pake ini..kapan2 deh pasang nya, karena pake html mesti utak atik template tuh hehehe :)

Balas

cocok ya mas buat judul blog yang ada di header hehe

Balas

Wah nambah ilmu nih mas, saya belum pernah nyoba tuh yang macem ini

Balas

sepertinya asik nih ya mas, berhubung harus utak atik daleman saya nyerah mas hehehe

Balas

WIW master blog lagi...heioheoehioehioe
salam bloglang \m/

Balas

mas andes... blogku gimana itu biar html 5 :D .

Balas

hehe top :-bd 146 Errors, 155 warning
penyebabnya kebanyakan dari javascript. saya pandu sedikit.. kamu pasti bisa betulin.
replace semua kode & dengan &amp; atau &amp;amp;
<script language="JavaScript"> ganti dengan <script type='text/javascript'>
hapus semua kode <b:include name='quickedit'/> ini tidak mempengaruhi tampilan jika di hapus. kode ini muncul secara otomatis setiap kamu menambahkan widget.
hapus juga semua kode marginwidth=0 marginheight=0 dan border="0"
hapus kode <base target='_blank'/> memang praktis kode ini fungsinya buat membuka link di tab baru secara otomatis, tapi itu tidak valid.
kalo posting gambar dengan caption hapus juga kode inialign="center" cellpadding="0" cellspacing="0"
selebihnya perlu focus saat mengoprek template :)

Balas

langsung ke TKP aja sob, ijin mencoba ya..

Balas

Kunjungan malam sambil baca baca disini...

Balas
  • Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
  • Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
  • Apabila artikel yang berjudul "Penggunaan Javascript Font Replacement (Cufon)" ini bermanfaat, share ke jejaring sosial.
Konversi Kode