风格和变形

今天讨论的属性简单易懂，所以阅读这一部分可能很轻松，首先，我们将讨论font-style，再转向font-variant，最后对字体属性做一个总结。

有风格的字体

font-style很简单：用于在normal文本、italic文本和oblique文本之间进行选择。就这么简单！唯一有点复杂的是要明确italic文本和oblique文本之间的差别，并了解为什么浏览器并不能始终提供选择。

可以看到，font-style的默认值是normal。这是指“竖直”的文本，可能最好描述为“非斜体或倾斜的文本”。例如，本书中的绝大多数文本都是竖直的。接下来只需对italic文本和oblique文本的差别做一个解释。对此，最容易的办法是参考图5-16，这里很清楚地展示了二者的区别。

基本说来，斜体（italic）是一种单独的字体风格，对每个字母的结构有一些小改动，来反映变化的外观。对于serif字体尤其如此，除了文本字符“有些斜”以外，serifs可以修改为一种斜体字体。与此不同，倾斜（oblique）文本则是正常竖直文本的一个倾斜版本。标为Italic、Cursive和Kursiv的字体总是映射到italic关键字，而oblique总是对应到标为Oblique、Slanted和Incline。的字体。

p {font-style: normal;}

em, i {font-style: icalic;}

这些样式使段落像平常一样使用竖直字体，而让em和i元素一如平常地使用一种斜体字体（italic）。另一方面，可能决定在em和i之间应该有点区别：

p {font-style: normal;}

em {fonc-style: oblique;}

i {font-style: italic;}

如果仔细查看图5-17，会看到em和i元素之间并没有明显的区别。实际中，并不是每一种字体都如此复杂，同时有斜体（italic）和倾斜（oblique）字体，甚至即使这两种字体同时存在，也很少有浏览器复杂到足以区别它们。

如果想确保文档以你熟悉的方式使用斜体文本，可以编写以下样式表：

如果存在这些情况，可能要做更多工作。如果没有italic字体，但是有一种Oblique字体，则要在需要前者的地方使用后者。如果情况反过来，存在Italic字体，但是没有Oblique字体，根据规范，用户代理可能不会把后者换成前者。最后，用户代理可能只是计算竖直字体的一个倾斜版本来生成oblique字体。实际上，数字世界中通常都会这样做，用一个简单的计算来完成字体的倾斜相当容易。

此外，你可能发现在许多操作系统中声明为italic的给定字体可能会从italic切换到oblique，这取决于字体的具体大小。例如，在运行Classic OS (Mac OS 9）的一个Macintosh机器上，Times的显示如图5-18所示，其唯一的区别是大小有一个像素之差。

遗憾的是，对此做不了什么，除非操作系统提供了更好的字体处理，如Mac OS X和 Windows XP就提供了更好的字体处理。通常，italic和oblique字体在Web浏览器中看上去完全一样。

不过，font-style还是很有用的。例如。一种常用的排版约定要求块引用应当是斜体，而引用中特别强调的文本应当是竖直的。为了达到这种效果，如图5-19所示，应当使用以下样式：

blockquote (font-style: italic;)

blockquote em, blockquote i {font-style: normal;}

字体变形

除了大小和风格，字体还可以有变形。CSS提供了一种办法来确定非常常见的变形。

对于font-variant，它只有两个非继承值：默认值normal和small-caps,normal描述正常文本，small-caps要求使用小型大写字母文本。如果你对这种效果还不熟悉。

IT LOOKS SOMETHING LIKE THIS。小型大写字母既不是一般的大写字母，也不是小写字母，这种字体采用不同大小的大写字母。因此，可能会看到图5-20所示的结果。

h1 { font-variant: small-caps;}

h1 code, p {font-variant: normal;}

<h1>The Uses of <code>font-variant</code> On the Web</h1>

<P>

The property <code>font-variant</code> is very interesting…

</p>

可以注意到，在h1元素的显示中，只要文本源中出现大写字母，会显示一个更大的大写字母，而且只要文本源中出现一个小写字母，就会显示一个小型的大写字母。这与text-transform: uppercase很类似，唯一的区别在于，在此大写字母的大小不同。不过，之所以使用一个字体属性来声明small-caps，原因是有些字体有特定的small-caps 字体，这要通过一个字体属性来选择。

如果不存在这样的字体会怎么样呢？规范中提供了两种选择。第一种是让用户代理自己缩放大写字母来创建一个small-caps字体。第二种方法是让所有字母都大写，而且大小相同，就好像使用了声明text-transfom: uppercase;一样。这显然不是最理想的解决办法，不过确实允许这样做。

注意：Windows Internet Explorer在IE6之前采用的是后一种做法，即全变成大写。而大多数其他浏览器会在有要求时显示small-caps文本，

拉伸和调整字体

CSS2中有两个字体属性在CSS2.1中未出现。它们已经从CSS2.1中去除，这是因为，尽管它们在规范中巳经存在多年，但是还没有任何一个网页浏览器实现这两个属性。前一个属性允许将字体水平拉伸，第二个属性允许在网页设计师的首选字体不可用时，对替换字体进行智能缩放。首先来看拉伸。

顾名思义，这个属性用于让一种字体的字符更胖或更瘦。就像font-size属性的绝对大小关键字（如xx-large）一样，这个属性有一系列绝对值，还有两个值允许创作人员增加或减少字体的拉伸度。例如，一个创作人员可能决定强调一个已经很强调的元素，将其字体字符拉伸得比其父元素的字体字符更宽，如图5-21所示：

strong {font-stretch: wider;}

注意：图5-21用Photoshop做了修改，因为在写作本书时Web浏览器不支持font-stretch。

调整字体大小的过程也未实现，这个过程稍微有些复杂。

这个属性的目标是，当所用字体并非创作人员的首选时，仍然保证可以辨识。由于字体外观上的差异，一种字体在某个大小时可能可以辨识，而另一种同样大小的字体则可能很难辨识，甚至无法阅读。影响字体是否能辨识的因素包括其大小和其x-height。x-height除以font-size的结果称为方面值（aspect value）。如果字体的方面值较高，随着字体大小的减少这种字体往往还能辨识，反过来，如果字体的方面值比较低，就会更快地变得不可辨识。

下面来比较常用的字体Verdana和Times,这是一个很好的例子。考虑图5-22和以下标记，在此font-size设置为10px,此时这两种字体显示如下：

p {font-size: 10px;}

p.c11 {font-family: Verdana, sans-serif;}

p.c12 {font-family: Times, serif;}

Times字体的文本比Verdana文本更难读。部分原因在于基于像素的显示所存在的限制，另一个原因是：对于较小的字体大小，Times会变得更难读。

可以看到，对于Verdana字体，x-height与字符大小的比值是0.58，而对于Times则是0.46。在这种情况下，所能做的就是声明Verdana的方面值，用户代理会调整具体使用的文本大小。这通过使用以下公式实现：

声明的font-size x (font-size-adjust值÷可用字体的方面值）=调整后的font-size

因此，在使用Times而不是Verdana的情况下，调整如下：

10px ×(0.58 ÷ 0.46)= 12.6px

这就会得到如图5-23所示的结果，

p {font: 10px Verdana, sans-serif; font-size-adjust: 0.58;}

p.cll {font-family: Times, serif;}

注意：图5-23用Photoshop做了修改，因为写作本书时很少有浏览器支持font-size-adjust。

当然，要让网页浏览器聪明地完成大小调整，还必须知道你的首选字体的方面值。在CSS2 中没有一种办法能简单地从字体得到这个值，很多字体可能根本没有这个信息。