往往設計師在設計時一廂情願地去思考問題,那樣會帶來很多潛在的麻煩。事實上你可以為網頁設計任意字體,包括藝術字體。也許你的計算機中已經安裝了很多字體,但是不能夠保證所有的瀏覽者都已經安裝了相同的字體,因此,當你非常想使用各種個性字體或藝術字體美化頁面時,你可以使用下面的方法來解決此類矛盾。
一種方法是在font-family屬性設置你喜歡的字體,同時也定義一些備用字體。如果瀏覽者的系統中安裝了指定的字體,就會看到漂亮的頁面,如果沒有,瀏覽器會自動搜索在font-family屬性中指定的字體列表,直到找到備用字體為止。
另一種方法是為font-family屬性指定通用字體。所謂通用字體,就是它表示一類字體,這樣瀏覽器就能夠根據你指定的字體類別從本地系統中找到類型相同的字體來解析網頁文字。
也許你看到的字體成千上萬,其顯示的效果和風格也千差萬別,例如,打印體、藝術體、手寫體、象形體、卡通體、古典體等。但是幾乎所有的字體都可以歸為兩類:serif和sans-serif。
serif類型的字體是成比例有襯線的字體。成比例是指字體中的所有字母根據它們不同的尺寸占據不同的寬度。例如,字母l和m所占的寬度是不同的。襯線是指字體上附加的裝飾性細線。例如,小寫字母l會在頂部和底部附加細小的“手”和“腳”。常用serif型字體有Times、Times New Roman、Georgia等。sans-serif類型的字體是有比例但是沒有襯線的字體。常用的sans-serif類型字體有Arial、Helvetica等。例如,在下面的代碼中,我們可以直觀地比較serif和sans-serif類型字體的顯示效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .p1{ font:36px "Times New Roman", Times, serif; } .p2{ font: 36px Arial, Helvetica, sans-serif; } </style> </head> <body> <p class="p1">The World Wide Web Consortium ---serif</p> <p class="p2">The World Wide Web Consortium ---serif</p> </body> </html>
serif類型的字體很適合在正文中使用,這些“手”和“腳”裝飾線很容易把一行內所有的字母聯系在一起,使瀏覽者的視線隨着這些細線不斷從左向右的牽引,這樣能夠提高閱讀速度。
而sans-serif類型字體由於沒有這些裝飾線,整個字體顯得干凈、利落,很適合作為文章的標題文字使用。
除了上面兩類常用的通用字體外,在羅馬字符中還可以看到下面幾種類型的字體,當然這些字體在網頁設計中不是很常用,多用於傳統印刷中。
cursive:模擬人筆跡的字體,一般這些字體大部分是由曲線和比襯線字體更強的筆畫修飾組成。例如,Comic Sans。
fantasy:特殊字體,這些字體不能通過某種單一的特性來定義,而且也不能簡單地歸為其他系列的某一類。例如,Western、Klingon。
monospace:無比例的字體,通常用於模擬打印機打出的字體,這些字體中的每個字符都占有同樣的寬度。例如,Courier。
當在網頁中定義字體樣式時,一般建議字體列表的最后一種字體選擇通用字體,這主要是考慮到當瀏覽者的系統中沒有指定字體時,瀏覽器可以搜索系統中同類字體來顯示網頁字體。
摘自《精通CSS網頁布局》第3章