css字体

字體類別

在顔色之後，一個網頁頁面最重要的特性大概就是字體。在本頁面中我不會示範任何「花招」，但我會指出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中，還有一種樣式可使用：「字體特效」讓字母看似雕刻的或是浮凸的。