Mohon maaf, mungkin terdapat beberpa artikel yang contohnya tidak ada dan tidak dapat didownload bahkan sudah tidak dapat diterapkan. Hal ini dikarenakan artikel tersebut ditulis babaerapa tahun lalu (jadul).

05 July 2010

Font Embedded pada Browser User

Nah, kali ini saya akan menuliskan bagaimana cara mengganti jenis fonts untuk ditampilkan dalam suatu web. Untuk mengganti jenis fonts tersebut cukup mudah yakni menuliskan script di bawah ini.
 
<font face='Times New Roman, Times, serif'>Coba Font Default</font>
 
Hasilnya: Coba Font Default

Mungkin ada yang bertanya, kenapa terdapat 3 jenis fonts dalam script di atas bingung. Sedikit saya akan jelaskan sesuai pengethuan saya. 3 Jenis fonts tersebut ditulis dengan maksud memberikan pilihan suatu browser untuk menampilkan jenis tulisan tersebut. Script diatas secara default akan menampilkan secara berurutan jenis fonts yang akan tampil. Awalnya browser tersebut menggunakan fonts Times New Roman. Jika browser tersebut tidak mendukung fonts itu, maka browser akan menggunakan fonts Times jika juga tidak mendukung, maka browser tersebut akan mengunakan jenis fonts Serif.

Secara default ketiga fonts tersebut akan muncul sesuai dengan urutannya karena dalam kebanyakan sistem operasi sudah tertanam jenis fonts tersebut. Nah pertanyaanya, bagaimana cara kita menggunakan fonts tertentu yang belum tertanam pada sistem operasi yang digunakan oleh pengunjung suatu web? Mari kita pelajari nyengir.

Ok, misalnya saja kita ingin mengganti jenis fonts kita ke "Betsy Flanagan" pada web, apakah pada komputer user, fonts tersebut akan nampak? Belum tentu, jika pada sistem operasi user tidak ada fonts "Betsy Flanagan" maka tidak akan terlihat fonts itu. Nah, dengan demikian mari kita membuat agar fonts tersebut tetap terlihat meskipun pada sistem operasi user tidak memiliki fonts jenis itu, dengan kata lain, kita tanam fonts tersebut agar bisa diakses dimanapun.

Langkah 1, kita siapakan fonts yang ingin digunakan. Jika nantinya halaman web dibuka menggunakan browser IE, kita harus meng-converter fonts manjadi berextensi *.eot karena embedded fonts di IE harus fonts berextensi .eot, kita bisa meng-converter secara online di situs ini : http://accessify.com/tools-and-wizards/developer-tools/quick-escape/default.php setelah itu perlu diingat fonts harus juga ikut kita upload di dalam webhosting.

Lagkah 2, tuliskan script css di bawah ini kedalam code HTML anda.
<style type="text/css">
    @font-face {
     font-family: xinthinx;
     src: url("/file/betsy.eot") /* EOT file for IE */
    }
    @font-face {
     font-family: xinthinx;
     src: url("/file/betsy.ttf") /* TTF file for CSS3 browsers */
    }
    
    span.demo {
     font-family: xinthinx;
     font-size: 40px;
    }
</style>

<span class="demo">Coba Font Default</span>
Setelah itu, coba kita ketikkan sesuatu pada halaman web setelah kode <body>. Karena pada blogspot ini saya belum tau cara meletekkan kode css tersebut agar font dapat di tampilkan di blog ini, maka anda dapat lihat contohnya.

No comments:

Post a Comment