語言

這是一份翻譯。與英文版本相比,它可能包含錯誤或者過時。翻譯員:Samuel Chong of Chinese Translation Services through its pro bono translation services

網頁樣式表CSS 提示與竅門

請見 索引 查看更多提示.

在此頁面上:

字體類別

在顏色之後,一個網頁頁面最重要的特性大概就是字體。在本頁面中我不會示範任何「花招」,但我會指出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 屬性有更多的值。

Bert Bos,style activity lead
Copyright ©1994–2022 W3C®Privacy policy

創建於 17 Jan 2001;
最後更新2022年02月10日 星期四 05:40:52

語言

關於翻譯