标记语言——为文字指定CSS样式(2)
都在家族里
当然,我们也能改变字体,但需要留意的是可能会被使用者系统上安装的字体限制住.
接着以font-family属性为实例加上一组希望使用的字体.这边的概念是:指定一组字体列表,中间以逗号隔开,并且以希望使用的顺序排列.如果使用者没有安装列表中的第一个字体,浏览器会选用第二个字体,以此类推.
body {
font-family: Georgia, Times, serif;
line-height: 1.5em;
}
在前面这个例子里,所要求的是"用Georgia字体修饰所有文字,如果使用者没有安装Georgia的话,改用Times,如果还没有安装Times的话,就是用预设的serif字体".
图13-3显示了示例加上font-family之后的效果.
图13-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;
}
修改成果在图13-4里能看到.
图13-4 为<h1>加上负数值得letter-spacing
或者尝试加上正数的letter-spacing并同时用font-style属性把标题改为斜体:
h1 {
letter-spacing: 4px;
font-style: italic;
}
图13-5是依照上述修改过后的效果,单就文字来讲变得十分引人注目了,不是吗?不使文字间距变动的太夸张是个明智之举,因为这样反而很容易使文字变得难以阅读,一旦内容难以阅读,还有谁会在意它吸不吸引人呢?你说是吧!
图13-5 使用正数letter-spacing值,并且应用斜体