Monday, December 15, 2014

Tutorial CSS Part 5: Mengatur Font

Font adalah sekumpulan bentuk huruf pada komputer. Ada banyak jenis font yang bisa kita pakai dan beragam bentuknya. CSS menyediakan beberapa properti untuk mengatur font pada halaman html. Beberapa properti yang bisa digunakan adalah mengatur famili font, ukuran font, style font, varian font dan ketebalan font.

Berikut ini properti untuk font dan penjesannya :

1. font-family

Adalah properti CSS yang digunakan untuk mengeset nama font yang digunakan pada elemen html. Pada CSS terdapat dua cara mendeskripsikan font-family yaitu dengan nama generic dan nama family.

Generic font ada tiga jenis, yaitu :
  • Serif, adalah jenis font yang memiliki akhiran garis kecil pada huruf
  • Sans-serif, adalah jenis font tanpa akhiran garis kecil pada huruf. Kata Sans-berarti tanpa.
  • Monospace, adalah jenis font yang mempunyai lebar yang sama untuk tiap-tiap huruf.
Sedangkan nama family font ada banyak sekali seperti font-font yang biasa kita pakai saat membuat dokumen melalui ms word atau libre office writer. Namun font-font ini bisa dikelompokkan kedalam tiga nama generic tadi.

Contoh pengelompokan font family :
  • Times New Roman, Georgia , termasuk kelompok Serif
  • Arial, Verdana , termasuk kelompok Sans-Serif
  • Courier New, Lucida Console, termasuk kelompok Monospace.
Contoh penggunaan CSS font-family :
body {
    font-family: "Times New Roman", Times, serif;
}

Kita bisa berlatih CSS font-family disini >>

2. font-style

Adalah properti CSS yang digunakan untuk mengatur style font seperti cetak miring-italic, cetak miring-oblique atau normal. Normal berarti font ditampilkan secara normal tanpa style italic atau oblique.

Sekilas antara italic dan oblique tidak ada perbedaan. Style italic berarti mengambil font-family italic, jadi sudah miring dari asalnya. Sedangkan style oblique mengambil font-family true type lalu di tampilkan miring (condong). Pada beberapa font, penggunaan style oblique akan diperoleh kemiringan font yang lebih baik.

Contoh penggunaan CSS font-style :
p {
    font-style: italic;
}

Kita bisa berlatih CSS font-style disini >>

3. font-size

Adalah properti CSS yang digunakan mengatur ukuran font. Ada beberapa jenis satuan ukuran font yang bisa dipakai misalnya px (pixel) dan em.

Ada dua cara dalam menentukan ukuran font, yaitu absolute size dan relative size. Absolute size berarti mengeset ukuran font pada ukuran tertentu dan tidak mengijinkan user untuk mengubahnya, pada semua browser. Sedangkan relative adalah mengeset ukuran font kepada elemen sekitarnya. Relative font mengijinkan user mengubah ukuran font pada browser.

Contoh penggunaan CSS font-size secara absolute dengan pixel :
h1 {
    font-size: 16px;
}

Kita bisa berlatih CSS font-size absolute dengan pixel disini >>

Contoh penggunaan CSS font-size secara relative dengan em :
h1 {
    font-size: 1em;
}

Note : 
Ukuran em mengacu pada ukuran font current pada browser, yaitu sebesar 16px. namun ukuran em mengijinkan browser untuk mengubah ukuran font dengan setting default font pada browser. penggunaan em lebih direkomendasikan dan banyak dipakai oleh beberapa developer web.

Kita bisa berlatih CSS font-size absolute dengan em disini >>

4. font-weight

Adalah properti CSS yang digunakan untuk mengatur ketebalan font. Secara default, font weight akan diset normal. Nilai properti font-wight bisa diset normal, bold, bolder, lighter atau dengan angka seperti 100, 200 dan seterusnya.

Contoh penggunaan CSS font-weight :
p {
    font-weight: bold;
}

Kita bisa berlatih CSS font-weight disini >>

5. font-variant

Adalah properti CSS yang digunakan untuk mengatur varian font, seperti normal atau small caps. Dengan small caps akan membuat membuat lowercase menjadi uppercase. Selain itu juga bisa diset dengan nilai initial atau inherit.

Contoh penggunaan CSS font-variant :
p {
    font-variant: small-caps;
}

Kita bisa berlatih CSS font-variant disini >>

6. font

Adalah properti CSS yang merupakan penggabungan dari beberapa properti. Penggunaan properti font akan meringkas penulisan CSS font.

Contoh penggunaan CSS font :
p {
    font: italic bold 12px arial, sans-serif;
}

Kita bisa berlatih CSS font disini >>

Lihat indeks artikel Tutorial CSS Dasar >>

Referensi :

0 komentar

Post a Comment