風格和變形
今天討論的屬性簡單易懂,所以閱讀這一部分可能很輕松,首先,我們將討論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 中沒有一種辦法能簡單地從字體得到這個值,很多字體可能根本沒有這個信息。
當前文章標題:網頁設計中字體的風格和變形
當前URL:http://m.iy5y368.cn/news/wzzz/font-style-in-web-design.html
上一篇:字體大小設置
下一篇:網頁設計中字體屬性的設置