CSS Font

font-family

Properti font-family harus mempunyai beberapa jenis huruf. Jika browser tidak mendukung jenis huruf yang pertama, ia mencoba jenis berikutnya. Mulailah dengan jenis huruf yang anda inginkan.

Jika jenis huruf lebih dari satu, harus dalam tanda kutip :

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

Beberapa contoh jenis huruf yang sering digunakan :

font-family	Contoh
Georgia, serif	Contoh Heading Contoh Paragraf
"Palatino Linotype", "Book Antiqua", Palatino, serif	Contoh Heading Contoh Paragraf
"Times New Roman", Times, serif	Contoh Heading Contoh Paragraf
Arial, Helvetica, sans-serif	This is a heading This is a paragraph
Arial Black, Gadget, sans-serif	Contoh Heading Contoh Paragraf
"Comic Sans MS", cursive, sans-serif	Contoh Heading Contoh Paragraf
Impact, Charcoal, sans-serif	This is a heading This is a paragraph
"Lucida Sans Unicode", "Lucida Grande", sans-serif	Contoh Heading Contoh Paragraf
Tahoma, Geneva, sans-serif	Contoh Heading Contoh Paragraf
"Trebuchet MS", Helvetica, sans-serif	Contoh Heading Contoh Paragraf
Verdana, Geneva, sans-serif	Conto Heading Contoh Paragraf
"Courier New", Courier, monospace	This is a heading Contoh Paragraf
"Lucida Console", Monaco, monospace	Contoh Heading Contoh Paragraf

---

font-style

Properti font-style banyak digunakan untuk menentukan teks miring.

h1{
font-style:normal;
}
h2{
font-style:italic;
} 
h3{
font-style:oblique;
} 

Nilai	Keterangan
normal	Browser akan menampilkan huruf secara normal
italic	Browser akan menampilkan huruf miring
oblique	Browser akan menampilkan huruf miring. Ini kurang didukung, karena akan mirip dengan nilai italic

---

font-size

Properti font-size menentukan besar atau kecilnya huruf.

h1{
font-size:250%;
}
h2{
font-size:200%;
} 
h3{
font-size:150%;
} 

Nilai	Keterangan
xx-small	Mengatur ukuran font xx kecil
x-small	Mengatur ukuran font ekstra kecil
small	Mengatur ukuran font kecil
medium	Mengatur ukuran font sedang. Ini default
large	mengatur ukuran font besar
x-large	Mengatur ukuran font ekstra besar
xx-large	Mengatur ukuran font xx besar
smaller	Mengatur ukuran font lebih kecil dari ukuran font yang anda gunakan
larger	Mengatur ukuran font lebih besar dari ukuran font yang anda gunakan
length	Mengatur dengan ukuran px, cm, dll.
%	Mengatur dengan ukuran % dari ukuran font yang anda gunakan

---

font-variant

Properti font-variant dengan nilai small-caps, akan membuat huruf kecil dirubah menjadi huruf besar. Tetapi, huruf besarnya lebih kecil dari huruf besar yang anda gunakan.

h1{
font-variant:small-caps;
}

Value	Description
normal	Browser menampilkan font normal. Ini default
small-caps	Browser menampilkan font small-caps

---

font-weight

Properti font-weight menentukan tebal atau tipis suatu font.

h1{
font-weight:normal;
}
h2{
font-weight:bold;
} 
h3{
font-weight:900;
} 

Nilai	Keterangan
normal	Karakter normal
bold	Karakter tebal
bolder	Karakter tebal
lighter	Karakter ringan
100 200 300 400 500 600 700 800 900	Dari karakter tipis sampai tebal. 400 ukuran normal, dan 700 sama dengan nilai bold

---

font

Properti font untuk tidak memakan banyak tempat, bisa dibilang penggabungan dari properti diatas.

h1{
font:35px arial,sans-serif;
}
h2{
font:bold 25px/30px georgia, serif;
} 

Urutannya seperti ini:

h1{
font:font-style font-variant font-weight font-size/line-height font-family;
}

Properti bisa digunakan berapa saja, terserah anda.

---

Alhamdulillah