最近评论
正在载入评论列表...
5.5 字体尺寸设置font-size
用font-size定义的字体尺寸显然要比font-weight定义的字体粗细精确，因为字体尺寸有具体的度量值。
属性值：绝对尺寸 | 相对尺寸 | 长度 | 百分比值 | 继承值
初始值：medium
作用于：所有元素
是否继承：是
百分比值：参考上级元素的字体尺寸
计算值：绝对长度
font-size属性的属性值可以有多种指定方式，绝对尺寸、相对尺寸、长度、百分比值都可以用来定义。
绝对尺寸属性值是一组关键字，这些关键字所定义的字体大小是逐一递增的。图5.12演示了这种字体大小的递增关系。
绝对尺寸关键字所代表的字体大小和HTML标题以及HTML字体尺寸有一一对应的关系，示例5.8演示了这样的对应关系，“medium”表示中间参照值。
示例5.8
<html>
<head>
<title>CSS Demo</title>
<style>
body,table,tr,td { font-family: Arial; }
table { border-collapse: collapse; }
tr,td { vertical-align: bottom; }
</style>
</head>
<body>
<table border="1">
<tr><th>CSS绝对字体尺寸</th><th>HTML标题</th><th>HTML字体尺寸</th></tr>
<tr><td style="font-size:xx-small;">xx-small</td><td><h6>Heading
6</h6></td><td><font size="1">HTML size 1</font></td></tr>
<tr><td style="font-size:x-small;">x-small</td><td></td><td></td></tr>
<tr><td style="font-size:small;">small</td><td><h5>Heading
5</h5></td><td><font size="2">HTML size 2</font></td></tr>
<tr><td style="font-size:medium;">medium</td><td><h4>Heading
4</h4></td><td><font size="3">HTML size 3</font></td></tr>
<tr><td style="font-size:large;">large</td><td><h3>Heading
3</h3></td><td><font size="4">HTML size 4</font></td></tr>
<tr><td style="font-size:x-large;">x-large</td><td><h2>Heading
2</h2></td><td><font size="5">HTML size 5</font></td></tr>
<tr><td style="font-size:xx-large;">xx-large</td><td><h1>Heading
1</h1></td><td><font size="6">HTML size 6</font></td></tr>
<tr><td></td><td></td><td><font size="7">HTML size 7</font></td></tr>
</table>
</body>
</html>
效果如图5.12所示，3种定义方式所产生的字体大小有着基本的对应关系。
图5.12 各种字体大小定义之间的关系
|
注 意 |
||
|
|
在CSS 1规范中，相邻关键字之间所代表的字体大小比例约为1:1.5，而在CSS 2规范中，这个比例被调整到了1:1.2左右。 |
|
相对字体大小定义只有两个关键字，即“larger”和“smaller”。它们分别以上级元素继承大小为参照值，放大或者缩小字体。
“larger”或者“smaller”放大或者缩小字体是以一级为单位的，假设当前上层元素字体大小相当于绝对尺寸的“medium”，那么定义“larger”会在这里被翻译成绝对尺寸的“large”。
示例5.9演示了利用相对字体大小属性缩小字体的方法。
示例5.9
<html>
<head>
<title>CSS Demo</title>
<style>
p { font-size: small; }
.mysmaller { font-size: smaller; }
</style>
</head>
<body>
<p>本示例演示了利用相对字体大小属性<span class="mysmaller">缩小字体</span>的方法。
</body>
</html>
效果如图5.13所示，继承的大小为“small”，那么使用“smaller”缩小后的字体大小为“x-small”。
图5.13 font-size定义缩小字体属性值
|
注 意 |
||
|
|
长度或者百分比值的定义方法和绝对大小关键字定义之间没有明确的一一对应关系。 |
|
除了绝对尺寸和相对尺寸关键字定义法，还有一种定义字体大小的方法就是长度值法或者百分比值法。
可以定义字体的长度值有pt、px、ex和em等，这些单位的具体说明详见第2章的介绍。
如果用百分比值方法来定义，则表示当前字体相对于默认大小的百分比值，而非继承值。示例5.10演示了这样的用法，效果如图5.14所示。
图5.14 扩大为4倍原始大小的1级标题
示例5.10
<html>
<head>
<title>CSS Demo</title>
<style>
h1 { font-size: 400%; }
</style>
</head>
<body>
<h1>这里是1级标题</h1>
<h2>这里是2级标题</h2>
</body>
</html>
该代码表示<h1>元素的字体大小比原先1级标题字体的默认大小大4倍，而不表示它比继承值大一倍。
在Dreamweaver 8中定义字体尺寸需要同时设置数值和单位，分别在两个下拉列表框中选择，如图5.15所示。
图5.15 在Dreamweaver 8中定义字体尺寸
图书导读
