風(fēng)格和變形

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

有風(fēng)格的字體

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

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

基本說來，斜體（italic）是一種單獨(dú)的字體風(fēng)格，對每個字母的結(jié)構(gòu)有一些小改動，來反映變化的外觀。對于serif字體尤其如此，除了文本字符“有些斜”以外，serifs可以修改為一種斜體字體。與此不同，傾斜（oblique）文本則是正常豎直文本的一個傾斜版本。標(biāo)為Italic、Cursive和Kursiv的字體總是映射到italic關(guān)鍵字，而oblique總是對應(yīng)到標(biāo)為Oblique、Slanted和Incline。的字體。

p {font-style: normal;}

em, i {font-style: icalic;}

這些樣式使段落像平常一樣使用豎直字體，而讓em和i元素一如平常地使用一種斜體字體（italic）。另一方面，可能決定在em和i之間應(yīng)該有點(diǎn)區(qū)別：

p {font-style: normal;}

em {fonc-style: oblique;}

i {font-style: italic;}

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

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

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

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

遺憾的是，對此做不了什么，除非操作系統(tǒng)提供了更好的字體處理，如Mac OS X和 Windows XP就提供了更好的字體處理。通常，italic和oblique字體在Web瀏覽器中看上去完全一樣。

不過，font-style還是很有用的。例如。一種常用的排版約定要求塊引用應(yīng)當(dāng)是斜體，而引用中特別強(qiáng)調(diào)的文本應(yīng)當(dāng)是豎直的。為了達(dá)到這種效果，如圖5-19所示，應(yīng)當(dāng)使用以下樣式：

blockquote (font-style: italic;)

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

字體變形

除了大小和風(fēng)格，字體還可以有變形。CSS提供了一種辦法來確定非常常見的變形。

對于font-variant，它只有兩個非繼承值：默認(rèn)值normal和small-caps,normal描述正常文本，small-caps要求使用小型大寫字母文本。如果你對這種效果還不熟悉。

IT LOOKS SOMETHING LIKE THIS。小型大寫字母既不是一般的大寫字母，也不是小寫字母，這種字體采用不同大小的大寫字母。因此，可能會看到圖5-20所示的結(jié)果。

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元素的顯示中，只要文本源中出現(xiàn)大寫字母，會顯示一個更大的大寫字母，而且只要文本源中出現(xiàn)一個小寫字母，就會顯示一個小型的大寫字母。這與text-transform: uppercase很類似，唯一的區(qū)別在于，在此大寫字母的大小不同。不過，之所以使用一個字體屬性來聲明small-caps，原因是有些字體有特定的small-caps 字體，這要通過一個字體屬性來選擇。

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

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

拉伸和調(diào)整字體

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

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

strong {font-stretch: wider;}

注意：圖5-21用Photoshop做了修改，因?yàn)樵趯懽鞅緯鴷rWeb瀏覽器不支持font-stretch。

調(diào)整字體大小的過程也未實(shí)現(xiàn)，這個過程稍微有些復(fù)雜。

這個屬性的目標(biāo)是，當(dāng)所用字體并非創(chuàng)作人員的首選時，仍然保證可以辨識。由于字體外觀上的差異，一種字體在某個大小時可能可以辨識，而另一種同樣大小的字體則可能很難辨識，甚至無法閱讀。影響字體是否能辨識的因素包括其大小和其x-height。x-height除以font-size的結(jié)果稱為方面值（aspect value）。如果字體的方面值較高，隨著字體大小的減少這種字體往往還能辨識，反過來，如果字體的方面值比較低，就會更快地變得不可辨識。

下面來比較常用的字體Verdana和Times,這是一個很好的例子?？紤]圖5-22和以下標(biāo)記，在此font-size設(shè)置為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的方面值，用戶代理會調(diào)整具體使用的文本大小。這通過使用以下公式實(shí)現(xiàn)：

聲明的font-size x (font-size-adjust值÷可用字體的方面值）=調(diào)整后的font-size

因此，在使用Times而不是Verdana的情況下，調(diào)整如下：

10px ×(0.58 ÷ 0.46)= 12.6px

這就會得到如圖5-23所示的結(jié)果，

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

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

注意：圖5-23用Photoshop做了修改，因?yàn)閷懽鞅緯鴷r很少有瀏覽器支持font-size-adjust。

當(dāng)然，要讓網(wǎng)頁瀏覽器聰明地完成大小調(diào)整，還必須知道你的首選字體的方面值。在CSS2 中沒有一種辦法能簡單地從字體得到這個值，很多字體可能根本沒有這個信息。