Perintah @font-face dalam CSS
Bentuk lain sebagai cara merubah font pada tampilan website adalah dengan menggunakan peritnah @font-face. Jika sebelumnya telah dijelaskan bagaimana cara mengubah font website dengan font-family bawaan CSS, sekarang akan dijelaskan bagaimana mengubah font dengan menggunakan @font-face.Penggunaan ini hanya semaat mata untuk membuat website lebih berbeda dengan website lainnya. Tampilan font yang digunakan adalah font yang berasal dari 'luar' dan diundang ke halaman CSS. Sebelumnya, alangkah baiknya anda jika mengetahui jenis jenis font yang disukung oleh browser agar website yang dibbuat benar benar bisa dibaca oleh banyak orang. Ingat jika salah menggunakan font, bisa bisa tampilan website akan berantakan karena jenis font tidak didukung browser.
- EOT (Embedded Open Type) : format font yang compatible hanya dengan browser Internet Explorer. dan relatif jarang digunakan. Untuk merubah format font menjadi EOT, dibutuhkan aplikasi khusus. aplikasi tersebut bisa diliaht di website www.fontsquirrel.com
- TTF (True Type) and OTF (Open Type) : dua format font ini adalah format font yang paling banyak dipergunakan. TTF dan OTF compatible dengan banyak browser seperti: Internet Explorer 9 ke atas, Mozilla Firefox, Google Chrome, Safari, Opera dan iOS Safari v.42, Android browser, dan Blackberry.
- WOFF (Web Open Font Format) : Format WOFF adalah jenis format terbaru dan sengaja didesain khusus untuk kepentingan web. WOFF sebenarnya adalah versi kompresi dari TTF and OTF. Namun WOFF memiliki keunggulan yaitu ukuran lebih kecil dan akan lebih cepat jika di download. WOFF bisa beroperasi pada browser seperti: Internet Explorer 9 ke atas, mozilla Firefox, Google Chrome, Safari, Opera, Blackberry ,dan iOS Safari v.5 ke atas.
- SVG (Scalable Vector Graphic). Format SVG sebenarnya bukan merupakan format untuk font, tapi format untuk menyimpan gambar vector [*gambar yang bila di zoom tak merubah kualitasnya). Format font SVG tidak didukung oleh Internet Explorer dan jmozilla Firefox.
Cara Menggunakan Font External dalam CSS
Untuk cara merubah font pada tampilan website dengan external font ini maka harus dipersiapkan font yang digunakan. Sekarang kita akan gunakan font yang ada dalam sistem Wndows. Caranya adalah Control Panel - Appereance and Personalization - Font.
<!DOCTYPE html>
<html>
<head>
<title>ibahasapemograman</title>
<style type="text/css">
@font-face {
font-family: "huruf gue";
src: url('ITCBLKAD.TTF');
}
.ini {
font-family: "huruf gue";
font-size: 29px;
}
</style>
</head>
<body>
<h2>Menggunakan Font External CSS</h2>
<h3>Font default:</h3>
<p> Dari hasil pengujian hipotesis dengan mengunakan software MINITAB 14 didapat P-value 0,041. P-value yang didapat kecil dari 0,05 artinya hipotesis penelitian diterima. Dengan demikian, hasil belajar matematika siswa dengan pembelajaran model reciprocal teaching lebih baik daripada pembelajaran konvensional. </p>
<h3>Font input external:</h3>
<p class="ini">Dari data aktivitas terlihat adanya peningkatan aktivitas positif siswa. Ini berarti model pembelajaran reciprocal teaching mampu meningkatkan aktivitas siswa. </p>
</body>
</html>
<style type="text/css">
@font-face {
font-family: "huruf gue";
src: url('ITCBLKAD.TTF');
}
.ini {
font-family: "huruf gue";
font-size: 29px;
}
</style>
Perintah @font-face di atas merupakan peritnah untuk mengundang jenis huruf dari file lain. Untuk font-family: "huruf gue"; bisa anda ubah " huruf gue dengan nama jenis font sesuka anda. Kemudian src: url('ITCBLKAD.TTF'); merupakan value alamat dimana file jenis font berada. Selanjutnya baru digunakan dalam sebuah penulisan CSS untuk merubah huruf seperti biasa. Misalkan pada contoh di atas, saya menggunakan huruf tersebut pada selector "ini". Kemudian pada selector ini saya memberikan propertu font-family dengan value sesuai nama font yang telah saya berikan pada fungsi @font-face tadi. ("huruf gue").
Share Yuk
Related Posts
Loading...
No comments:
Post a Comment