風格和變形

今天討論的屬性簡單易懂，所以閱讀這一部分可能很輕松，首先，我們將討論font-style，再轉向font-variant，最后對字體屬性做一個總結。

有風格的字體

font-style很簡單：用于在normal文本、italic文本和oblique文本之間進行選擇。就這么簡單！唯一有點復雜的是要明確italic文本和oblique文本之間的差別，并了解為什么瀏覽器并不能始終提供選擇。

可以看到，font-style的默認值是normal。這是指“豎直”的文本，可能最好描述為“非斜體或傾斜的文本”。例如，本書中的絕大多數文本都是豎直的。接下來只需對italic文本和oblique文本的差別做一個解釋。對此，最容易的辦法是參考圖5-16，這里很清楚地展示了二者的區(qū)別。

基本說來，斜體（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之間應該有點區(qū)別：

p {font-style: normal;}

em {fonc-style: oblique;}

i {font-style: italic;}

如果仔細查看圖5-17，會看到em和i元素之間并沒有明顯的區(qū)別。實際中，并不是每一種字體都如此復雜，同時有斜體（italic）和傾斜（oblique）字體，甚至即使這兩種字體同時存在，也很少有瀏覽器復雜到足以區(qū)別它們。

如果想確保文檔以你熟悉的方式使用斜體文本，可以編寫以下樣式表：

如果存在這些情況，可能要做更多工作。如果沒有italic字體，但是有一種Oblique字體，則要在需要前者的地方使用后者。如果情況反過來，存在Italic字體，但是沒有Oblique字體，根據規(guī)范，用戶代理可能不會把后者換成前者。最后，用戶代理可能只是計算豎直字體的一個傾斜版本來生成oblique字體。實際上，數字世界中通常都會這樣做，用一個簡單的計算來完成字體的傾斜相當容易。

此外，你可能發(fā)現在許多操作系統(tǒng)中聲明為italic的給定字體可能會從italic切換到oblique，這取決于字體的具體大小。例如，在運行Classic OS (Mac OS 9）的一個Macintosh機器上，Times的顯示如圖5-18所示，其唯一的區(qū)別是大小有一個像素之差。

遺憾的是，對此做不了什么，除非操作系統(tǒng)提供了更好的字體處理，如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很類似，唯一的區(qū)別在于，在此大寫字母的大小不同。不過，之所以使用一個字體屬性來聲明small-caps，原因是有些字體有特定的small-caps 字體，這要通過一個字體屬性來選擇。

如果不存在這樣的字體會怎么樣呢？規(guī)范中提供了兩種選擇。第一種是讓用戶代理自己縮放大寫字母來創(chuàng)建一個small-caps字體。第二種方法是讓所有字母都大寫，而且大小相同，就好像使用了聲明text-transfom: uppercase;一樣。這顯然不是最理想的解決辦法，不過確實允許這樣做。

注意：Windows Internet Explorer在IE6之前采用的是后一種做法，即全變成大寫。而大多數其他瀏覽器會在有要求時顯示small-caps文本，

拉伸和調整字體

CSS2中有兩個字體屬性在CSS2.1中未出現。它們已經從CSS2.1中去除，這是因為，盡管它們在規(guī)范中巳經存在多年，但是還沒有任何一個網頁瀏覽器實現這兩個屬性。前一個屬性允許將字體水平拉伸，第二個屬性允許在網頁設計師的首選字體不可用時，對替換字體進行智能縮放。首先來看拉伸。

顧名思義，這個屬性用于讓一種字體的字符更胖或更瘦。就像font-size屬性的絕對大小關鍵字（如xx-large）一樣，這個屬性有一系列絕對值，還有兩個值允許創(chuàng)作人員增加或減少字體的拉伸度。例如，一個創(chuàng)作人員可能決定強調一個已經很強調的元素，將其字體字符拉伸得比其父元素的字體字符更寬，如圖5-21所示：

strong {font-stretch: wider;}

注意：圖5-21用Photoshop做了修改，因為在寫作本書時Web瀏覽器不支持font-stretch。

調整字體大小的過程也未實現，這個過程稍微有些復雜。

這個屬性的目標是，當所用字體并非創(chuàng)作人員的首選時，仍然保證可以辨識。由于字體外觀上的差異，一種字體在某個大小時可能可以辨識，而另一種同樣大小的字體則可能很難辨識，甚至無法閱讀。影響字體是否能辨識的因素包括其大小和其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 中沒有一種辦法能簡單地從字體得到這個值，很多字體可能根本沒有這個信息。