#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: CSS, Desain, Potongan
17 Comments:
kurang paham saya :(
By Surga Kenari, at Saturday, August 4, 2012 at 1:36:00 AM GMT+7
'Droid Serif' gak ada ya Bang....
Masuk keluarganya siapa nih..........
By Kang Kapuk, at Saturday, August 4, 2012 at 2:31:00 AM GMT+7
mungkin maksudnya.. kumpulan font yg sekeluarga.. jadi ada kategori2nya yg huruf miring diatasnya.
By abang ichal, at Saturday, August 4, 2012 at 11:13:00 AM GMT+7
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.
By Taufik Nurrohman, at Saturday, August 4, 2012 at 8:46:00 PM GMT+7
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;
By Taufik Nurrohman, at Saturday, August 4, 2012 at 8:49:00 PM GMT+7
kalo font di blog saya apa yah? arial kan? sudah mendukungkah =D
By Putra, at Saturday, August 4, 2012 at 9:18:00 PM GMT+7
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
By Taufik Nurrohman, at Saturday, August 4, 2012 at 11:30:00 PM GMT+7
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
By Anonymous, at Wednesday, September 5, 2012 at 11:36:00 AM GMT+7
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;
}
By Anonymous, at Wednesday, September 5, 2012 at 12:49:00 PM GMT+7
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.
By Taufik Nurrohman, at Wednesday, September 5, 2012 at 1:50:00 PM GMT+7
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;
}
By Taufik Nurrohman, at Wednesday, September 5, 2012 at 1:58:00 PM GMT+7
kalau untuk font di postingan cocoknya yg mana aja kira2 mas?
saya kurang mengerti tentang font. :D
By Anonymous, at Wednesday, September 5, 2012 at 1:58:00 PM GMT+7
Yang gampang dibaca: Serif & Sans Serif.
By Taufik Nurrohman, at Wednesday, September 5, 2012 at 2:00:00 PM GMT+7
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
By Anonymous, at Wednesday, September 5, 2012 at 2:20:00 PM GMT+7
kalo "Brush Script mt" masuknya ke mana yah?
saya pakek di blog font tersebut tapi tanpa @font-face dan jalan/tampil.
By Anonymous, at Monday, October 8, 2012 at 11:19:00 PM GMT+7
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
By Unknown, at Sunday, November 4, 2012 at 10:08:00 PM GMT+7
kalau font yg ini termasuk apa ya gan "Gang of Three"
By Unknown, at Friday, December 21, 2012 at 11:46:00 PM GMT+7
Post a Comment
<< Home