Fon Handwriting dalam web anda

faezil

Newbie
Joined
Oct 2, 2007
Messages
7,061
Points
38
Salam semua,

Mungkin ada yang dah lama tau mende ni.... saya baru je tahu ilmu ni dan rasa nak berkongsi kepada semua :D

Baru-baru ni saya telah ditemukan dengan satu plugin yang bernama cufon.

Fungsinya adalah untuk membolehkan kita menggunakan font yang kita suka dalam website kita... cthnya font handwriting.

1866d1277878073-fon-handwriting-dalam-web-anda-untitled-1.jpg


Kalau cara tradisional, kita terpaksa jadikan ia berformat grafik untuk membolehkan fon itu digunakan.

Sekarang.... serahkan je tugas itu kepada cufon :D

Cufon boleh diinstal apa jua jenis web. Memandangkan di sini ramai penggemar WP, maka saya akan ceritakan cufon dalam WP.

Tapi sebelum itu, mari kita sediakan bahan-bahannya dulu


  • sediakan/tentukan fon yang nak dipilih. Jika ia berada di folder windows/fonts, copy ke luar sekejap.
  • Buka web ini untuk menukar format font anda kepada format js
  • siap sedia dengan perisan filezilla, atau apa sahaja perisian utk anda manage fail web anda
Langkah-langkah untuk menginstall cufon dalam blog WP


  1. Cari, install dan activate plugin bernama 'wp-cufon'
  2. Bina folder 'fonts' dalam /wp-content/plugins
  3. Upload font js di dalam folder fonts tersebut
  4. Kembali ke WP-admin, pergi ke appearance > cufon
  5. Pastikan font js anda tersenarai.
  6. Tukar nama fon dalam "Your Cufón replacement-code" kepada nama fon yang anda pilih
  7. siap
 

Attachments

  • Untitled-1.jpg
    48.2 KB · Views: 146
Last edited:

faiz_sufi

freshman
Joined
Sep 11, 2009
Messages
435
Points
0
bagaimana sekiranya dalam komputer visitor itu tiada font jenis itu?

adakah akan keluar "internet explorer cannot display thir page"

atau bila kita tulis akan jadi macam jpeg?

p/s=apa apa pun nice sharing
 

faezil

Newbie
Joined
Oct 2, 2007
Messages
7,061
Points
38
bagaimana sekiranya dalam komputer visitor itu tiada font jenis itu?

adakah akan keluar "internet explorer cannot display thir page"

atau bila kita tulis akan jadi macam jpeg?

p/s=apa apa pun nice sharing

perkataan tersebut telah ditukar ke dalam bentuk grafik (format png)... so tak perlukan lagi font daripada komputer visitor.

contohnya, lihat blog ini

lihat tajuk setiap posting
 

Apeh

freshman
Joined
Mar 30, 2007
Messages
1,259
Points
38
Kalo utk landing pages biasa mcm mane bro?
 

faezil

Newbie
Joined
Oct 2, 2007
Messages
7,061
Points
38
Kalo utk landing pages biasa mcm mane bro?

step dia hampir sama....

di laman yang nak convert font ke js tu, ada satu button download (yang ada tulis 1.09 warna oren tu).

klik kanan save link as utk download plugin cufon-yui.js

so, maknanya sekurang2nya ada 3 fail

- cufon-yui.js
- fail font yang telah digenerate
- landing page

kemudian, copy-paste kod di dalam ruangan <head></head>

HTML:
        <script src="cufon-yui.js" type="text/javascript"></script>
        <script src="quickhand_400.font.js" type="text/javascript"></script>
        <script type="text/javascript">
            Cufon.replace('h1');
           Cufon.replace('h2');
        </script>
 

Attachments

  • contoh.zip
    24.9 KB · Views: 79

faezil

Newbie
Joined
Oct 2, 2007
Messages
7,061
Points
38
aha.. ye.. kat blogger pun boleh gak... just upload kod js tu kat somewhere dan tepek kod js tu dalam template atau layout.

Skrg ni sesiapa yang menawarkan template boleh menggunakan cufon sebagai nilai tambah
 

Apeh

freshman
Joined
Mar 30, 2007
Messages
1,259
Points
38
Thanks bro faezil ..
 

faezil

Newbie
Joined
Oct 2, 2007
Messages
7,061
Points
38
Thanks bro faezil ..

sama-sama..

jika nak guna lebih >1 jenis font, boleh gunakan :

HTML:
<script type="text/javascript">
Cufon.replace('.perhatian', { fontFamily: "Franklin Gothic Medium Cond" } );
Cufon.replace('.siggy', { fontFamily: "quickhand" } );
</script>
 

faezil

Newbie
Joined
Oct 2, 2007
Messages
7,061
Points
38
Anda juga boleh menggunakan teknik ini untuk mencipta tandatangan di web jualan anda
 

fly2high

Senior
Joined
Aug 19, 2009
Messages
528
Points
18
nice!, nanti bleh buat signature. hehe
 
Top