网页文字应用CSS设计的一些技巧中

　　图3显示了示例加上font-family之后的效果.

　　图3 以Georgia字体显示的示例效果.

　　名称内含空格的字体

　　如果像指定名称内含空白的字体(比如说Lucida Grande),就必须以引号包住整个字体名称.

　　在下面的例子中,将把Lucida Grande(有名的Macintosh字体)选为希望使用的字体,并且指定Trebuchet MS(有名的Windows字体)作为第二候补,再加上一个通吃的sans-serif.在前面两种字体都没有安装的情况下,取用预设的sans-serif字体.

　　body {
font-family: "Lucida Grande", "Trebuchet MS", sans-serif;
line-height: 1.5em;
}

　　字距调整(又称作字母间隔)

　　字距调整是个在印刷界描述文字间隔的名词.与其同义的CSS属性是letter-spacing.接着,让我们为＜h1>标签使用letter-spacing属性,为示例的标题加点料.

　　在为＜h1>标签应用letter-spacing之后,就能使标题更引人注目,而不必打开图片编辑器开始制作图片文字.

　　首先,让我们为letter-spacing属性加上负数值把标题的文字紧缩:

　　h1 {
letter-spacing: -2px;
}

　　修改成果在图4里能看到.

图4 为＜h1>加上负数值得letter-spacing

　　或者尝试加上正数的letter-spacing并同时用font-style属性把标题改为斜体:

　h1 {
letter-spacing: 4px;
font-style: italic;
}

　　图5是依照上述修改过后的效果,单就文字来讲变得十分引人注目了,不是吗?不使文字间距变动的太夸张是个明智之举,因为这样反而很容易使文字变得难以阅读,一旦内容难以阅读,还有谁会在意它吸不吸引人呢?你说是吧!

　　图5 使用正数letter-spacing值,并且应用斜体

　　首字大写

　　首字大写在印刷界十分常见,这能为段落加上华丽而优雅的效果,而且不必用上图片就能办到这种效果,只用CSS就够了.

　　首先,必须为标记源代码加上一个"样式锚点"让我们有办法调用第一段的第一个字母.我们将 "I" 用一组＜span>标签包起来并给它指定class=drop,如果我们才能在页面或整个网站里重复使用首字大写效果.

　　＜p>＜span class="drop">I＜/span>f you're painting with latex paints, and the job ...

　　在某些完全支持CSS2规范的现代浏览器中,我们可以用:first-letter伪类设定段落首字效果,而不必加上额外的标签,虽然语义上非常棒,不幸的是许多浏览器都不支持这个效果.

　　现在我们能完全控制第一段的 "I" 字母了,让我们加上CSS声明,以便把字体放大,同时将它浮动到左侧(这样,其他的文字才不会包围它显示),我们也会加上装饰用的背景,边框.

　　.drop {
float: left;
font-size: 400%;
line-height: 1em;
margin: 4px 10px 10px 0;
padding: 4px 10px;
border: 2px solid #ccc;
background: #eee;
}