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”)
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:
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. body {font-size: 13px; } // satuan pixelbody {font-size: 1.5em; } // satuan embody {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 :
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: p.normal {font-variant: normal; } // tulisan normalp.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: p.normal{font-weight: normal;} // font normalp.tebal{font-weight: bold; } // hasil tebal Sebagai alternatif, sebenarnya bisa juga menggunakan tag <strong> atau <b> dimana fungsinya juga sama yakni membuat tulisan tebal.
Baca Juga:
Okey, tutorial belajar css tentang CSS font sudah cukup. Saya yakin anda akan semakin jelas dalam mempelajari css dan ketagihan belajar css.
Sumber: http://jagocoding.com/tutorial/1232/Memanipulasi_Huruf_di_CSS
0 Komentar