這是一份翻譯。與英文版本相比,它可能包含錯誤或者過時。翻譯員:Samuel Chong of Chinese Translation Services through its pro bono translation services
在顏色之後,一個網頁頁面最重要的特性大概就是字體。在本頁面中我不會示範任何「花招」,但我會指出CSS允許的字體變化範圍。
由於並非所有的電腦都有所有的字體(字體成千上萬,且多數不是免費的, CSS提供了一個應變系統。你先列出你想要的字體,然後為首選的字體如果無法使用的備用字體和你也應以通用的字體來作為這個清單的結束。通用字體共有五種serif (襯線體), sans-serif(無襯線體), monospace(等寬體), cursive(草書體) 和 fantasy(幻想體) .
下表顯示下表展示不同字體的範例(你的流覽器可能無法分辨所有這些字體),你可以看到這五種通用字體在你的流覽器上所顯示的效果:
Font family | Your browser | Sample image |
---|---|---|
'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 | |
Verdana, sans-serif
| The Quick Brown Fox Jumps Over The Lazy Dog | |
Trebuchet MS, sans-serif
| The Quick Brown Fox Jumps Over The Lazy Dog | |
Gill Sans, sans-serif
| The Quick Brown Fox Jumps Over The Lazy Dog | |
Noto Sans, sans-serif
| The Quick Brown Fox Jumps Over The Lazy Dog | |
Avantgarde, TeX Gyre Adventor, URW Gothic L,
sans-serif
| The Quick Brown Fox Jumps Over The Lazy Dog | |
Optima, sans-serif
| The Quick Brown Fox Jumps Over The Lazy Dog | |
Arial 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, Times New Roman, serif
| The Quick Brown Fox Jumps Over The Lazy Dog | |
Didot, serif
| The Quick Brown Fox Jumps Over The Lazy Dog | |
Georgia, serif
| The Quick Brown Fox Jumps Over The Lazy Dog | |
Palatino, URW Palladio L, serif
| The Quick Brown Fox Jumps Over The Lazy Dog | |
Bookman, URW Bookman L, serif
| The Quick Brown Fox Jumps Over The Lazy Dog | |
New Century Schoolbook, TeX Gyre Schola, serif
| The Quick Brown Fox Jumps Over The Lazy Dog | |
American Typewriter, 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 | |
FreeMono, monospace
| The Quick Brown Fox Jumps Over The Lazy Dog | |
OCR A Std, monospace
| The Quick Brown Fox Jumps Over The Lazy Dog | |
DejaVu Sans Mono, 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 MS, Comic Sans, cursive
| The Quick Brown Fox Jumps Over The Lazy Dog | |
Apple Chancery, cursive
| The Quick Brown Fox Jumps Over The Lazy Dog | |
Bradley Hand, cursive
| The Quick Brown Fox Jumps Over The Lazy Dog | |
Brush Script MT, Brush Script Std, cursive
| The Quick Brown Fox Jumps Over The Lazy Dog | |
Snell Roundhand, cursive
| The Quick Brown Fox Jumps Over The Lazy Dog | |
URW Chancery L, 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 | |
Luminari, fantasy
| The Quick Brown Fox Jumps Over The Lazy Dog | |
Chalkduster, fantasy
| The Quick Brown Fox Jumps Over The Lazy Dog | |
Jazz LET, fantasy
| The Quick Brown Fox Jumps Over The Lazy Dog | |
Blippo, fantasy
| The Quick Brown Fox Jumps Over The Lazy Dog | |
Stencil Std, fantasy
| The Quick Brown Fox Jumps Over The Lazy Dog | |
Marker Felt, fantasy
| The Quick Brown Fox Jumps Over The Lazy Dog | |
Trattatello, 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… |
CSS字體模組具有更多的屬性來指定特殊的樣式(對於提供幾種變體的字體),特別是font-variant 屬性有更多的值。
創建於 17 Jan 2001;
最後更新2022年02月10日 星期四 05:40:52