Bert Boscreated 17 Jan 2001;
last updated $Date: 2009/09/08 13:41:53 $ GMT
译文:网页样式表 - CSS的提示与窍门
英文:
http://www.w3.org/Style/Examples/007/indent
说明:
翻译: Chinese Translation Services
字體類別
字體樣式
在顏色之後，一個網頁頁面最重要的特性大概就是字體。在本頁面中我不會示範任何「花招」，但我會指出CSS允許的字體變化範圍。
由於並非所有的電腦都有所有的字體（字體成千上萬，且多數不是免費的），CSS提供了一個應變系統。你先列出你想要的字體，然後為首選的字體如果無法使用的備用字體，你也應以通用的字體來作為這個列表的結束。通用字體共有五種：serif (襯線體), sans-serif(無襯線體), monospace(等寬體), cursive(草書體) 和 fantasy(幻想體).
下表展示不同字體的範例（你的瀏覽器可能無法分辨所有這些字體），你可以看到這五種通用字體在你的瀏覽器上所顯示的效果：
| '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 |
大部分同一類別的字體有多種不同的樣式，典型的有粗體字和斜體字，也經常有粗斜體字，稍少見的有小體大寫字，少數情況下有極細字／極粗字或延展字／壓縮字。
下表展示了許多不同的樣式。除非你有非常豐富的字集，否則其中許多行看來會是相同的：
| 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… | |||
在CCS3中，還有一種樣式可使用：「字體特效」讓字母看似雕刻的或是浮凸的。