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.