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

Web Style Sheets
CSS tips & tricks

(Halaman ini menggunakan CSS Style Sheet)

Keluarga Fonta

Style fonta

Keluarga Fonta

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

Style Fonta

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) .

CSS Valid CSS!Valid HTML 4.0!

Bert Bos
created 17 Jan 2001;
last updated $Date: 2007/10/27 00:47:14 $ GMT