CSS FONT

Fitur Css Font memang sangat diperlukan dalam pembuatan website. Beberapa kegunaan fitur Css Font yang bisa digunakan diantaranya seperti :

• Mengatur jenis font

• Mengatur ukuran font

• Mengatur ketebalan font

• Mengatur kemiringan font

OK..., mari kita lihat contohnya satu-persatu :

1. Mengatur jenis font

<style type="text/css">
p.serif{font-family:"Times New Roman",Times,serif;}
p.sansserif{font-family:Arial,Helvetica,sans-serif;}
</style>

<h1>CSS font-Mengatur jenis font</h1>
<p class="serif">Pada paragraf ini jenis font yang digunakan adalah Times New Roman.</p>
<p class="sansserif">Sedang Pada paragraf ini jenis font yang digunakan adalah Arial.</p>

Hasilnya sebagai berikut :

CSS font-Mengatur jenis font

Pada paragraf ini jenis font yang digunakan adalah Times New Roman.
Sedang Pada paragraf ini jenis font yang digunakan adalah Arial.

2. Mengatur ukuran font

<style type="text/css">
p {font-family:"Times New Roman",Times,serif; font-size:16px;}
p {font-family:"Times New Roman",Times,serif; font-size:1em;}
p {font-family:"Times New Roman",Times,serif; font-size:100%;}
</style>

<p>Teks standart dengan font berukuran 16 px</p>
<p>Teks standart dengan font berukuran 1 em</p>
<p>Teks standart dengan font berukuran 100 %</p>

Hasilnya sebagai berikut :

Teks standart dengan font berukuran 16 px
Teks standart dengan font berukuran 1 em
Teks standart dengan font berukuran 100 %

Catatan :
Untuk Mengatur ukuran font, ada tiga satuan nilai yang bisa kita gunakan yaitu "px", "em", "%". Pada tampilan standart, nilai ukuran font biasanya 16 px atau sama dengan 1 em, atau sama dengan 100%.

<style type="text/css">
p {font-family:"Times New Roman",Times,serif; font-size:20px;}
p {font-family:"Times New Roman",Times,serif; font-size:3em;}
p {font-family:"Times New Roman",Times,serif; font-size:200%;}
</style>

<p>Teks standart dengan font berukuran 20 px</p>
<p>Teks standart dengan font berukuran 3 em</p>
<p>Teks standart dengan font berukuran 200 %</p>

Hasilnya sebagai berikut :

Teks standart dengan font berukuran 20 px
Teks standart dengan font berukuran 3 em
Teks standart dengan font berukuran 200 %

3. Mengatur ketebalan font

<style type="text/css">
p.normal {font-weight:normal;}
p.bold {font-weight:bold;}
</style>

<p class="normal">Teks standart dengan ketebalan font normal</p>
<p class="bold">Teks standart dengan ketebalan font bold</p>

Hasilnya sebagai berikut :

Teks standart dengan ketebalan font normal
Teks standart dengan ketebalan font bold

4. Mengatur kemiringan font

<style type="text/css">
p.normal {font-family:"Times New Roman",Times,serif; font-style:normal;}
p.italic {font-family:"Times New Roman",Times,serif; font-style:italic;}
</style>

<p>Teks standart dengan font tegak normal</p>
<p>Teks standart dengan font miring</p>

Hasilnya sebagai berikut :

Teks standart dengan font tegak normal
Teks standart dengan font miring

Ok...., Selamat mencoba dan Semoga bermanfaat....
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini.
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.

Judul: CSS FONT; Ditulis oleh Unknown; Rating Blog: 5 dari 5

Dengan memasukan alamat email dibawah ini, berarti anda akan dapat kiriman artikel terbaru dari Blogger Tutorial | SEO | Free Blogger Templates | OOM RIO.com di inbox anda:

Related Posts

• Membuat Teks Berjalan ( Marquee )Untuk menghiasi blog atau web, banyak cara yang bisa kita lakukan, termasuk memberi effek animasi teks berjalan. Dan untuk membuat teks berjalan caranya juga sangat ... readmore
• Cara buat menu drop down bubbleKoleksi baru lagi cara buat menu drop down, dan menu ini memiliki tampilan yang berbeda dengan menu drop down yang lain. Menu drop down ini mengunakan efek bubble y ... readmore
• CSS CSS atau Cascading Style Sheet adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampi ... readmore
• Modifikasi Thread Comments blogger dengan CSS Bismillah, menlanjutkan postingan yang sbelumnya yang membahas tentang caa Mengganti Avatar Anonim Pada Komentar dengan jQuery, kali ini saya akan membahas tent ... readmore
• Cara membuat Text-Shadow Update lagi cara membuat Text-Shadow. Banyak cara membuat variasi tampilan pada web ataupun blog kita, diantaranya kita bisa memberikan efek shadow pada teks. Pe ... readmore