Belajar CSS Part 9 - Font

Assalamu'alaikum warohmatullaahi wabarokaatuh.

Dalam Belajar CSS kali ini kita akan mempelajari tentang penggunaan Font dalam CSS.

A. FONT FAMILY

font-family digunakan untuk menentukan font family (jenis font) yang akan digunakan. Ada dua tipe dari font family :

1. generic family : font yang memiliki tampilan hampir sama. Contoh : Serif, Sans-Serif, Monospace
2. font family : font yang memiliki tampilan yang lebih specific. Contoh : Times New Roman, Arial

Ketika menggunakan font-family dalam CSS, disarankan untuk menentukan memilih lebih dari satu font sehingga ketika browser tidak support pada font yang pertama, maka kita memiliki opsi font yang kedua dan selanjutnya. Jika nama dari font-family  yang kita pilih memiliki lebih dari satu kata, maka kita tulis di dalam tanda kutip ("). Dan untuk memisahkan antar font-family digunakan tanda koma (,) Disarankan untuk memilih font yang Anda inginkan sebagai opsi pertama, dan generic font sebagai opsi terakhir. Contoh penggunaannya :

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

Penjelasan :

• Paragraf yang kita buat akan ditampilkan dengan font Times New Roman. Namun jika browser tidak support untuk Times New Roman, browser akan menggantinya dengan Times. Dan jika asih tidak support maka akan diganti dengan serif.

Coba sendiri di sini

B. FONT STYLE

font-style biasa digunakan untuk menspesifikasikan sebuah tulisan untuk ditulis miring atau tidak.  Ada tiga value yang bisa digunakan untuk properti font-style :

• normal : teks biasa
• italic : teks miring
• oblique : hampir sama dengan italic, namun tidak begitu disarankan.

Contoh penggunaan :

p.normal {
    font-style: normal;
}

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

Penjelasan :

• Dengan script CSS di atas, paragraf  dengan class normal akan ditampilkan seperti teks biasa
• Paragraf dengan class italic akan ditulis miring
• Paragraf dengan class oblique juga akan ditulis miring, namun agak tebal dari italic.

Coba sendiri di sini

C. FONT SIZE

font-size memiliki fungsi untuk mengatur ukuran font. Ukuran font bisa ditulis dalam satuan piksel atau em. Ukuran em disarankan oleh W3C. Satu em sama dengan 16 piksel. Namun dengan menggunakan satuan em, terdapat kekurangan jika dijalankan pada IE. Maka dari itu, maka solusi diambil dengan menentukan persentase ukuran font pada elemen body.

Contoh : 

body {
    font-size: 100%;
}

p.piksel {
    font-size: 12px;
}
p.em {
    font-size: 0.75em;
}

Penjelasan :

• Dengan script di atas, paragraf dengan class piksel dan class em sebenarnya memiliki ukuran yang sama, karena 16 piksel = 1 em, berarti 12 piksel = 0.75 em.

Coba sendiri di sini

D. FONT WEIGHT

font-weight merupakan properti yang berfungsi untuk mengatur sebuah teks apakah akan ditulis tebal atau normal. Contoh :

p.normal {
    font-weight: normal;
}
p.bold {
    font-weight: bold;
}

Penjelasan :

• Dengan script CSS di atas, paragraf yang kita beri class normal akan ditampilkan dalam teks biasa (tidak tebal).
• Sedangkan paragraf yang kita beri class bold akan ditampilkan dalam bentuk cetak tebal alias bold.

Coba sendiri di sini

E. FONT VARIANT

font-variant biasa digunakan untuk menentukan apakah sebuah teks akan ditulis dalam bentuk small-caps atau tidak. Dalam bentuk small-caps, seluruh teks akan ditulis dalam huruf kapital. Namun ukuran teks yang awalnya lowercase atau huruf kecil akan lebih kecil dibandingkan yang sudah kapital sejak awal,  Contoh :

Atas : font normal
Bawah : small caps

p.normal {

    font-variant: normal;
}

p.small {
    font-variant: small-caps;
}

Penjelasan :

• Dengan script CSS di atas, paragraf yang kita beri class normal akan ditampilkan dalam teks biasa.
• Sedangkan paragraf yang kita beri class bold akan ditampilkan dalam bentuk small-caps.

Coba sendiri di sini

Demikian Belajar CSS tentang Font, semoga bermanfaat. Terima kasih dan wassalamu'alaikum warohmatullaahi wabarokaatuh.