Berbisnis Online ala Google

Sabtu, 09 Juni 2012

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.

Tidak ada komentar:

Posting Komentar