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

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

都在家族里

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

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

标签:文字,样式,标记,css,手册
0
投稿

猜你喜欢

  • Oracle 存储过程加密方法

    2009-10-23 18:02:00
  • WEB页面工具语言XML应用分类之运用

    2008-05-29 10:58:00
  • MySQL数据库备份与恢复方法

    2024-01-18 08:54:10
  • Centos下升级php5.2到php5.4全记录(编译安装)

    2024-05-05 09:18:30
  • php mysql procedure实现获取多个结果集的方法【基于thinkPHP】

    2023-11-19 08:27:32
  • python是怎么被发明的

    2023-11-20 22:25:05
  • python 怎样进行内存管理

    2021-04-27 16:46:18
  • ASP GetRef 函数指针试探

    2011-03-16 11:09:00
  • PyQt4 treewidget 选择改变颜色,并设置可编辑的方法

    2021-05-26 23:15:11
  • 在opera里css出现渲染问题

    2009-01-15 12:19:00
  • 关于python下cv.waitKey无响应的原因及解决方法

    2022-03-04 14:51:21
  • MySQL数据库的约束使用实例

    2024-01-17 04:36:57
  • ASP隐藏真实文件的下载功能实现代码

    2011-04-14 11:12:00
  • python3设计模式之简单工厂模式

    2021-02-16 15:51:18
  • 制作设置404页面

    2009-07-03 13:01:00
  • pytz格式化北京时间多出6分钟问题的解决方法

    2021-07-31 14:10:21
  • ADO.Net对oracle数据库操作的实例代码

    2024-01-18 02:00:41
  • [翻译]标记语言和样式手册 Chapter 16 下一步

    2008-02-22 17:47:00
  • Python中re模块:匹配开头/结尾(^/$)

    2021-08-31 02:29:13
  • IIS服务器中部署PHP案例详解

    2023-06-11 19:17:42
  • asp之家 网络编程 m.aspxhome.com