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

4 comments:


  1. bikin tutor cara pake gugel font di blog dong....

  2. entar lagi diproses bro... internet saya lagi bermasalah...

  3. lihat disini bro... Google Font

  4. mantap mas :))

Posting Komentar


Creative Commons License
CSS Font by Nano Yulianto is licensed under a Creative Commons Attribution 3.0 Unported License.
Based on a work at http://nanoyulianto.blogspot.com/2010/12/css-font.html.
Permissions beyond the scope of this license may be available at http://nanoyulianto.blogspot.com/.