Friday, August 3, 2012

CSS Font Stack

#foo {

    /* 1. The Times New Roman-based serif stack */
    font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;

    /* 2. A modern Georgia-based serif stack */
    font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;

    /* 3. A more traditional Garamond-based serif stack */
    font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;

    /* 4. The Helvetica/Arial-based sans serif stack */
    font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;

    /* 5. The Verdana-based sans serif stack */
    font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif;

    /* 6. The Trebuchet-based sans serif stack */
    font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;

    /* 7. The heavier `Impact` sans serif stack */
    font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif;

    /* 8. The monospace stack */
    font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;

}

Sumber: Sitepoint - 8 Definitive Web Font Stacks Article

Labels: , ,

17 Comments:

At Saturday, August 4, 2012 at 1:36:00 AM GMT+7, Blogger Surga Kenari said...

kurang paham saya :(

 
At Saturday, August 4, 2012 at 2:31:00 AM GMT+7, Blogger Kang Kapuk said...

'Droid Serif' gak ada ya Bang....
Masuk keluarganya siapa nih..........

 
At Saturday, August 4, 2012 at 11:13:00 AM GMT+7, Blogger abang ichal said...

mungkin maksudnya.. kumpulan font yg sekeluarga.. jadi ada kategori2nya yg huruf miring diatasnya.

 
At Saturday, August 4, 2012 at 8:46:00 PM GMT+7, Blogger Taufik Nurrohman said...

Ini CSS fallback font yang disarankan karena kemiripan bentuknya. Jadi, misalnya untuk kategori Monospace. Kita sedang menampilkan font Consolas, maka jika komputer mendukung font Consolas, Consolas akan tampil. Tapi jika tidak, font yang akan ditampilkan adalah font yang ada setelahnya, begitu seterusnya sampai nama font terakhir: monospace.
Fallback font akhir yang umum digunakan setahu Saya ada tiga: Serif, Sans-Serif dan Monospace.

 
At Saturday, August 4, 2012 at 8:49:00 PM GMT+7, Blogger Taufik Nurrohman said...

Droid Serif masuk ke Serif. Disarankan diletakkan pada barisan Times New Roman-based Serif Stack (menurut Saya):

font-family: "Droid Serif", Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;

 
At Saturday, August 4, 2012 at 9:18:00 PM GMT+7, Blogger Putra said...

kalo font di blog saya apa yah? arial kan? sudah mendukungkah =D

 
At Saturday, August 4, 2012 at 11:30:00 PM GMT+7, Blogger Taufik Nurrohman said...

Font-font yang mendukung tanpa harus menyisipkan @font-face setahu Saya:
1. Arial
2. Tahoma
3. Verdana
4. Sans Serif
5. Serif
6. Times
7. Georgia
8. Monospace
9. Trebuchet MS
10. Comic Sans MS
11. Impact
12. Century Gothic

 
At Wednesday, September 5, 2012 at 11:36:00 AM GMT+7, Anonymous Anonymous said...

kang kalo keluarganya ini apa kang font-family: 'Maven Pro',sans-serif;

sama mau tanya kog font facenya cuma keliatan rapi pake mozilla itu pun kalo mozilla terbaru, kalo buat crome dan opera berantakan hasilnya

 
At Wednesday, September 5, 2012 at 12:49:00 PM GMT+7, Anonymous Anonymous said...

kalo dari css ini ada penjelasan yang lebih bisa di pahami gak kang

body { font-family: web-font, fallback-fonts; }
strong { font-family: web-font-bold; }
em { font-family: web-font-italic; }

@font-face {
font-family: 'web-font';
src: url('web-font.eot?') format('eot'),
url('web-font.woff') format('woff'),
url('web-font.ttf') format('truetype'),
url('web-font.svg') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'web-font-bold';
src: url('web-font-italic.eot?') format('eot'),
url('web-font-italic.woff') format('woff'),
url('web-font-italic.ttf') format('truetype'),
url('web-font-italic.svg') format('svg');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'web-font-italic';
src: url('web-font-bold.eot?') format('eot'),
url('web-font-bold.woff') format('woff'),
url('web-font-bold.ttf') format('truetype'),
url('web-font-bold.svg') format('svg');
font-weight: normal;
font-style: italic;
}

 
At Wednesday, September 5, 2012 at 1:50:00 PM GMT+7, Blogger Taufik Nurrohman said...

Pada bagian fallback tertulis sans-serif, jadi dia harusnya masuk ke Sans-Serif -- gambar tampilannya nggak ada @@,
@font-face berbeda-beda hasilnya kalau dilihat di peramban yang berbeda. Yang terkenal adalah yang bisa menyesuaikan diri di semua jenis peramban.

 
At Wednesday, September 5, 2012 at 1:58:00 PM GMT+7, Blogger Taufik Nurrohman said...

Seharusnya sih, @font-face dituliskan di bagian atas supaya termuat duluan. Gunanya untuk mengambil file font dari tempat font tersebut disimpan:

@font-face {
font-family:'web-font';
src:url('URL-alamat-file-font-ganteng-disimpan.ttf') format('truetype');
font-weight:normal;
}


Setelah itu terapkan CSS font di tempat yang dinginkan:

div {
font:normal normal 14px/1.4 "Web Font",Serif;
}

 
At Wednesday, September 5, 2012 at 1:58:00 PM GMT+7, Anonymous Anonymous said...

kalau untuk font di postingan cocoknya yg mana aja kira2 mas?
saya kurang mengerti tentang font. :D

 
At Wednesday, September 5, 2012 at 2:00:00 PM GMT+7, Blogger Taufik Nurrohman said...

Yang gampang dibaca: Serif & Sans Serif.

 
At Wednesday, September 5, 2012 at 2:20:00 PM GMT+7, Anonymous Anonymous said...

gini contohnya :

http://3.bp.blogspot.com/-3ZoTujU0W2I/UEb8t3g3xnI/AAAAAAAABsM/wPFjv9dvf_U/s1600/123.jpg

contoh itu dari dar mozilla dan google crome kenapa crome gak mampu mendeteksi font facenya, atau kurang mutahir kali ya

 
At Monday, October 8, 2012 at 11:19:00 PM GMT+7, Anonymous Anonymous said...

kalo "Brush Script mt" masuknya ke mana yah?
saya pakek di blog font tersebut tapi tanpa @font-face dan jalan/tampil.

 
At Sunday, November 4, 2012 at 10:08:00 PM GMT+7, Blogger Unknown said...

pengen dumel nih bang...

ko abang pinter banget sih, dari tadi saya keliling ilmu disini kaga ada yang nyangkut :D . dimaklum yah bang, namanya juga blogger dadakan hahaha

 
At Friday, December 21, 2012 at 11:46:00 PM GMT+7, Blogger Unknown said...

kalau font yg ini termasuk apa ya gan "Gang of Three"

 

Post a Comment

<< Home