語言

這是一份翻譯。 與 英文版本 相比,它可能包含錯誤或者過時。 翻譯員: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–2017 W3C®

創建於 17 Jan 2001;
最後更新 2017年11月09日 星期四 04:40:59

語言

關於翻譯