在網(wǎng)頁(yè)的設(shè)計(jì)開發(fā)過程中,最重要的莫過于網(wǎng)頁(yè)的視覺效果,設(shè)計(jì)人員經(jīng)常花費(fèi)大量精力用于調(diào)整字體和字號(hào)。利用CSS2規(guī)范,我們可以在Web頁(yè)面或應(yīng)用程序中隨意對(duì)字體進(jìn)行調(diào)整。
如何調(diào)整字號(hào)
CSS2規(guī)范是以字體長(zhǎng)度來定義字號(hào)的,長(zhǎng)度數(shù)字越大,字體的水平和垂直長(zhǎng)度就越大。在長(zhǎng)度數(shù)字前,有時(shí)候還會(huì)綴以“+”或者“-”號(hào)。另外,在字號(hào)后,有可能還跟隨著單位標(biāo)識(shí)符。CSS2規(guī)范中包含了兩種單位標(biāo)識(shí)符:絕對(duì)單位標(biāo)識(shí)符和相對(duì)單位標(biāo)識(shí)符。絕對(duì)值用來定義單位,而相對(duì)單位標(biāo)識(shí)符則表示相對(duì)于另一個(gè)值的大小,以下列出了幾種相對(duì)單位標(biāo)識(shí)符:
em表示字體的高度,它等于字體的font-size屬性經(jīng)過比例計(jì)算后的值。但有一種情況例外,即font-size屬性本身使用了em標(biāo)識(shí)符,在這種情況下它會(huì)以父元素的字體大小為參考;ex(x-height)指定與小寫字母x的高度相等;px(pixels)關(guān)系到畫布或屏幕分辨率,網(wǎng)頁(yè)顯示時(shí)的像素值完全取決于顯示器分辨率,這會(huì)使顯示結(jié)果隨用戶在屏幕分辨率上的偏好而改變。
另一種實(shí)現(xiàn)絕對(duì)字號(hào)的方法是使用縮放功能。你可以使用以下關(guān)鍵字來縮小或放大字體:xx-small、x-small、small、medium、large、x-large,以及xx-large。其中Medium是一個(gè)基準(zhǔn),帶有small字樣的參數(shù)會(huì)讓字體縮小,而帶有l(wèi)arge字樣的參數(shù)會(huì)讓字體擴(kuò)大。CSS2規(guī)范中定義的縮放比例是1.2,但是不同的瀏覽器可能有不同的解析結(jié)果。
采用何種方式
CSS中有大量關(guān)于字體字號(hào)方面的參數(shù),那么你的網(wǎng)頁(yè)該采用什么定義方式呢?采用絕對(duì)標(biāo)識(shí)符來確定字號(hào)有很多弊端,比如會(huì)對(duì)一致性和靈活性造成影響,還會(huì)在可訪問性方面出現(xiàn)問題。相對(duì)字號(hào)與絕對(duì)字號(hào)相比,可以讓用戶通過多種方式來調(diào)大字號(hào),從而更便于閱讀。在實(shí)際開發(fā)中,大多數(shù)設(shè)計(jì)人員采用的也是相對(duì)字號(hào)。下面讓我們更深入地了解一下相對(duì)字號(hào):
在字號(hào)方面使用最多的方式就是pixels方式(px),大多數(shù)瀏覽器都支持這種字號(hào)定義方式,使用這種方式的缺點(diǎn)就是用戶無法在IE瀏覽器中調(diào)節(jié)字體大小。
最普通的字號(hào)定義方式是使用em或百分比。用em定義的字號(hào)可以在任何瀏覽器中縮放,它同時(shí)也照顧到了用戶對(duì)字體的偏愛。不過em在IE中的表現(xiàn)并不理想,因此針對(duì)IE瀏覽器用戶,最好還是使用百分比。