位置：首页>> 网络编程>> 网页设计>> [翻译]标记语言和样式手册 Chapter 13 为文字指定样式（2）

[翻译]标记语言和样式手册 Chapter 13 为文字指定样式（2）

作者：zhaozy　来源：3user.com　发布时间：2008-02-15 16:08:00　

标签：文字,样式,标记,css,手册

都在家族里

当然,我们也能改变字体,但需要留意的是可能会被使用者系统上安装的字体限制住.

接着以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值,并且应用斜体

投稿

猜你喜欢