網頁樣式表 CSS 提示与窍门

请见 索引 查看更多提示.

在此页面上:

字体类别

在颜色之后,一个网页页面最重要的特性大概就是字体。在本页面中我不会示范任何 「花招」,但我会指出CSS允许的字体变化范围。

由于并非所有的电脑都有所有的字体(字体成千上万,且多数不是免费的, CSS提供了一个应变系统。你先列出你想要的字体,然后为首选的字体如果无法使用的 备用字体和你也应以通用的字体来作为这个列表的结束。通用字体共有五种 serif (衬线体), sans-serif(无衬线体), monospace(等宽体), cursive(草书体) fantasy(幻想体) .

下表显示下表展示不同字体的范例(你 的浏览器可能无法分辨所有这些字体),你可以看到这五种 通用字体在你的浏览器上所显示的效果:

Font familyYour browserSample image
'sans-serif': normal fonts without serifs
'serif': normal fonts with serifs
'monospace': fixed-width fonts
'cursive': fonts that emulate handwriting
'fantasy': decorative fonts, for titles, etc.

字体样式

大部分同一类别的字体有多种不同的样式,典型的 有粗体字和斜体字,也经常有粗斜体字,稍少见的有 小体大写字,少数情况下有极细字/极粗字或延展字/压缩字。

下表展示了许多不同的样式。除非你有非常丰富的字集, 否则其中许多行看来会是相同的:

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;
最后更新