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

• Cara membuat textarea dengan tombol "select all"Belajar kali ini adalah bagaimana kita menggunakan Javascript dan Css untuk menambahkan tombol "select all" pada textarea. Sehingga pengunjung lebih mudah untuk men ... readmore
• Cara membuat menu tooltipMenu yang berbentuk vertikal ini sangat menarik untuk dipasang pada web atau blog kita. Selain berfungsi sebagai daftar isi, tepatnya digunakan untuk daftar link at ... 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
• Thread Comments Stylish dengan CSS Modifikasi Thread Comments Blogger Dengan CSS, ini pernah saya bahas dan kali ini saya akan membagikan yang versi duanya yang lebih stylish yang kebetulan saya ... readmore
• CSS3 GeneratorSebelum memasuki pembahasan tentang CSS3 Generator, saya akan menjelaskan tentang Apa itu CSS3? mungkin dari kalian ada yang belum mengetahuinya menurut info yang s ... readmore