Belajar CSS 5: CSS Font, Memanipulasi Huruf di CSS

Sesi belajar css kali ini membahas tentang css font yang merupakan salah satu dari css style. CSS font digunakan untuk mengatur tampilan font atau huruf pada website.

CSS Font Family

Didalam CSS terdapat 2 tipe nama CSS font family, yaitu :

- Generik family : Kelompok font family dengan tampilan yang sama (seperti “serif” atau “monoscope”)

- Font family : Font family khusus / tertentu ( seperti “times new roman” atau ‘arial”)

Font family merupakan pengaturan jenis huruf yang akan digunakan, Contoh pemakaian :

?

1	p{font-family:"Times New Roman", Times, serif;}

CSS Font Style

Style disini yang paling banyak digunakan adalah cetak miring, yang sebenarnya juga terdapat style normal dan oblique. Berikut syntak CSS font style:

?

1 2 3 4 5

p.normal {font-style:normal;}   p.italic {font-style:italic;}   p.oblique {font-style:oblique;}

CSS Font Size

Didalam mendesain web, mengatur ukuran font itu penting. Dengan menggunakan property ini, memudahkan kita untuk mengatur ukuran font berbeda-beda dalam satu halaman website. Disini kita akan belajar juga cara mengatur ukuran font dalam css. Jangan lupa untuk Selalu gunakan tag HTML yang tepat, seperti <h1> – <h6> untuk heading dan paragraf <p>. Nilai font-size bisa menjadi ukuran absolut, atau relatif.

?

1 2 3 4 5

body {font-size: 13px; } // satuan pixel   body {font-size: 1.5em; } // satuan em   body {font-size: 100%; } // satuan %

Contoh diatas bisa diaplikasikan di browser firefox, safari dan chrome tapi tidak bisa digunakan di aplikasi internet explorer. Nah untuk itu banyak developer web menyarankan menggunakan em daripada pixel. 1em sama dengan 16 pixel. Ukurannya dihitung dari pixel ke dalam em menggunakan rumus pixels/16=em. Contoh :

?

1 2 3 4 5

h1 {font-size:2.5em;} /* 40px/16=2.5em */   h2 {font-size:1.875em;} /* 30px/16=1.875em */   p {font-size:0.875em;} /* 14px/16=0.875em */

CSS Font Variant

Contoh Font Variant adalah membuat font besar semua, dimana pada css text terdapat text transformation. Contoh syntak CSS Font Variant:

?

1 2 3

p.normal {font-variant: normal; } // tulisan normal   p.besar {font-variant: small-caps; } // TULISAN BESAR SEMUA CSS Font Weight Penggunaan yang sering ditemukan pada style font weight, yakni membuat huruf tebal. Berikut syntak untuk CSS font weight: ? 1 2 3 p.normal{font-weight: normal;} // font normal   p.tebal{font-weight: bold; } // hasil tebal Sebagai alternatif, sebenarnya bisa juga menggunakan tag <strong> atau <b> dimana fungsinya juga sama yakni membuat tulisan tebal. Okey, tutorial belajar css tentang CSS font sudah cukup. Saya yakin anda akan semakin jelas dalam mempelajari css dan ketagihan belajar css.