属性值：normal | italic | oblique | 继承值

初始值：normal

作用于：所有元素

是否继承：是

百分比值：不适用

计算值：指定的值

在普通用户看来，字体样式只有普通和斜体两种。表5.4列举了两种字体样式的显示效果。

表5.4 普通字体和斜体样式

当字体样式中定义“normal”的时候，浏览器选择在字体数据库中标识为“normal”的字体，对于“oblique”和“italic”也是一样。当浏览器数据库中没有标识为“italic”的字体时，就选择标识为“oblique”的字体。

由此可以看出，“normal”代表普通类型的字体样式，“oblique”和“italic”都代表斜体字体。

有时候，斜体字体仅仅是由浏览器自动把普通字体倾斜而产生。虽然“italic”和“oblique”都表示斜体字体，但是它们的侧重点有所不同。例如，字体名称里包含“Slanted”的字体通常会被标识为“italic”。有关字体样式的更深解释详见5.7节内容。

示例5.4演示了font-style属性被继承和覆盖的过程，效果如图5.4所示。

示例5.4

<html>

<head>

<style>

ul { font-style: normal; }

a { font-style: oblique; }

</style>

</head>

<body>

<ul>

<li>For Mcromedia Dreamweaver, <a href="http://www.macromedia.com/"> please click here</a>.

<li>For Microsoft FrontPage, <a href="http://www.microsoft.com/">please click here</a>.

</ul>

</body>

</html>

图5.4 font-style属性被继承和覆盖的例子

由于font-style属性能够被下级元素所继承，因此<ul>的下级元素<li>也显示“normal”字体样式。虽然<a>元素也应该继承“normal”属性，但是它设置的“oblique”属性覆盖了原先继承的属性，因此它显示为斜体字符。

在Dreamweaver 8中，设置字体样式比较方便，直接单击右键，在弹出的菜单中进行选择即可，如图5.5所示。

图5.5 在Dreamweaver 8中设置字体样式

【查看所有评论(0)条】

当前章节:5.2 字体样式设置font-style

CSS完全使用详解