语言

这是一份翻译。 与 英文版本 相比,它可能包含错误或者过时。 翻译员: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秒

语言

关于翻译