Aktifitas
Laporan teknis
Indeks Situs
Terjemahan
Perangkat lunak
Pencarian
Dekat:
Style
CSS
tips & tricks
Bert Boscreated 17 Jan 2001;
last updated $Date: 2007/10/27 00:47:14 $ GMT
Dokumen ini adalah terjemahan dari CSS tips & tricks - CSS: fonts dan mungkin terdapat kesalahan penerjemahan.
Dokumen aslinya dapat di temukan di: http://www.w3.org/Style/Examples/007/fonts
Penerjemah: Edwin Rene
(Halaman ini menggunakan CSS Style Sheet)
Setelah warna, fonta adalah properti yang paling dasar dari sebuah halaman. Pada halaman ini saya tidak akan menunjukkan trik apapun, tetapi saya akan menunjukkan variasi fonta yang dimungkinkan CSS.
Karena tidak semua fonta tersedia di semua komputer (ada ribuan fonta, dan kebanyakan tidak gratis), CSS menyediakan sistem mencoba fonta berikut yang ada dalam daftar bila yang pertama tidak bisa digunakan, dan anda harus daftar tersebut dengan sebuah fonta generik, yang ada lima buah: serif, sans-serif, monospace, cursive dan fantasy.
Tabel berikut menunjukkan contoh berbagai fonta (browser anda mungkin tidak tahu beberapa diantaranya) dan anda dapat melihat apakah yang dilakukan browser anda dengan tipe generic:
| 'sans-serif': normal fonts without serifs | |
|---|---|
Arial, sans-serif
| The Quick Brown Fox Jumps Over The Lazy Dog |
Helvetica, sans-serif
| The Quick Brown Fox Jumps Over The Lazy Dog |
Gill Sans, sans-serif
| The Quick Brown Fox Jumps Over The Lazy Dog |
Lucida, sans-serif
| The Quick Brown Fox Jumps Over The Lazy Dog |
Helvetica Narrow, sans-serif
| The Quick Brown Fox Jumps Over The Lazy Dog |
sans-serif
| The Quick Brown Fox Jumps Over The Lazy Dog |
| 'serif': normal fonts with serifs | |
Times, serif
| The Quick Brown Fox Jumps Over The Lazy Dog |
Times New Roman, serif
| The Quick Brown Fox Jumps Over The Lazy Dog |
Palatino, serif
| The Quick Brown Fox Jumps Over The Lazy Dog |
Bookman, serif
| The Quick Brown Fox Jumps Over The Lazy Dog |
New Century Schoolbook, serif
| The Quick Brown Fox Jumps Over The Lazy Dog |
serif
| The Quick Brown Fox Jumps Over The Lazy Dog |
| 'monospace': fixed-width fonts | |
Andale Mono, monospace
| The Quick Brown Fox Jumps Over The Lazy Dog |
Courier New, monospace
| The Quick Brown Fox Jumps Over The Lazy Dog |
Courier, monospace
| The Quick Brown Fox Jumps Over The Lazy Dog |
Lucidatypewriter, monospace
| The Quick Brown Fox Jumps Over The Lazy Dog |
Fixed, monospace
| The Quick Brown Fox Jumps Over The Lazy Dog |
monospace
| The Quick Brown Fox Jumps Over The Lazy Dog |
| 'cursive': fonts that emulate handwriting | |
Comic Sans, Comic Sans MS, cursive
| The Quick Brown Fox Jumps Over The Lazy Dog |
Zapf Chancery, cursive
| The Quick Brown Fox Jumps Over The Lazy Dog |
Coronetscript, cursive
| The Quick Brown Fox Jumps Over The Lazy Dog |
Florence, cursive
| The Quick Brown Fox Jumps Over The Lazy Dog |
Parkavenue, cursive
| The Quick Brown Fox Jumps Over The Lazy Dog |
cursive
| The Quick Brown Fox Jumps Over The Lazy Dog |
| 'fantasy': decorative fonts, for titles, etc. | |
Impact, fantasy
| The Quick Brown Fox Jumps Over The Lazy Dog |
Arnoldboecklin, fantasy
| The Quick Brown Fox Jumps Over The Lazy Dog |
Oldtown, fantasy
| The Quick Brown Fox Jumps Over The Lazy Dog |
Blippo, fantasy
| The Quick Brown Fox Jumps Over The Lazy Dog |
Brushstroke, fantasy
| The Quick Brown Fox Jumps Over The Lazy Dog |
fantasy
| The Quick Brown Fox Jumps Over The Lazy Dog |
Kebanyakan fonta mempunyai berbagai jenis style dalam keluarga yang sama, umumnya sebuah huruf tebal (bold) dan sebuah huruf miring (italic), dan terkadang sebuah style bold italic, dan terkadang sebuah small-caps dan dalam beberapa kasus versi extra-light/extra-bold atau versi stretched/condensed.
Tabel dibawah menunjukkan sejumlah style yang berbeda. Kecuali bila anda memiliki koleksi fonta yang sangat banyak, baris baris dibawah kebanyakan akan terlihat sama.
| rule | serif | sans-serif | |||
|---|---|---|---|---|---|
| Styles | |||||
font-style: normal
| The Quick… | The Quick… | |||
font-style: italic
| The Quick… | The Quick… | |||
font-style: oblique
| The Quick… | The Quick… | |||
| Weights | |||||
font-weight: 100
| The Quick… | The Quick… | |||
font-weight: 200
| The Quick… | The Quick… | |||
font-weight: 300
| The Quick… | The Quick… | |||
font-weight: normal
| The Quick… | The Quick… | |||
font-weight: 500
| The Quick… | The Quick… | |||
font-weight: 600
| The Quick… | The Quick… | |||
font-weight: bold
| The Quick… | The Quick… | |||
font-weight: 800
| The Quick… | The Quick… | |||
font-weight: 900
| The Quick… | The Quick… | |||
| Variants | |||||
font-variant: normal
| The Quick… | The Quick… | |||
font-variant: small-caps
| The Quick… | The Quick… | |||
| Stretch | |||||
font-stretch: ultra-condensed
| The Quick… | The Quick… | |||
font-stretch: extra-condensed
| The Quick… | The Quick… | |||
font-stretch: condensed
| The Quick… | The Quick… | |||
font-stretch: semi-condensed
| The Quick… | The Quick… | |||
font-stretch: normal
| The Quick… | The Quick… | |||
font-stretch: semi-expanded
| The Quick… | The Quick… | |||
font-stretch: expanded
| The Quick… | The Quick… | |||
font-stretch: extra-expanded
| The Quick… | The Quick… | |||
font-stretch: ultra-expanded
| The Quick… | The Quick… | |||
Pada CSS3, masih ada satu jenis style lagi yang tersedia: 'font-effect' membuat huruf seperti diukir (engraved) atau timbul (embossed) .
Aktifitas
Laporan teknis
Indeks Situs
Terjemahan
Perangkat lunak
Pencarian
Dekat:
Style
CSS
tips & tricks
Bert Bos