这是一份翻译。与英文版本相比,它可能包含错误或者过时。翻译员: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;
最后更新2025年02月16日 星期日 05时40分53秒