什麼是CSS通用字體?

排版設計在網站設計中起著重要作用,一個有著良好佈局及優美格式的文字內容網站更加優秀。而字體在這方面也扮演著重要的角色,你可以選擇合適的字體,然後使用CSS將這些字體樣式添加到頁面中,而這就需要使用到所謂的Font Stack來實現。

Font Stack

當你要指定某網頁使用一種字體時,最好也是最穩妥的做法就是選擇備用字體,以防之後想用卻找不到這種字體,這些字體的備份就在Font Satck中。

如果瀏覽器找不到Font Stack中指定的第一個字體,那麼它就會自動使用下一個字體,以此類推,直到找到可以使用的字體,如果始終都找不到才會選擇系統預設字體。

下面是一個在CSS中應用於”body”元素的Font Stack例子:

body { font- family:Georgia, "Times New Roman", serif; }

當首位字體為Georgia時,預設頁面就會使用這種字體,但如果該字體因某種原因無法使用,頁面將使用下一個字體Times New Roman。

Times New Roman這種由多個英文詞組成字體名稱需要用雙引號括起來。單個字的字體名稱,如Georgia或Arial,就不需要。一般就是這個字體名稱中存在空格就要加雙引號。

Font Stack通常都是以serif這個詞結束,它是一個通用的字體家族名稱。雖然不太可能發生,某電腦上既沒有Georgia,也沒有Times New Roman的情況。

但假如真的發生,它就會使用能找到的其他襯線字體來代替。這種情況下瀏覽器會幫你選擇字體。

 

通用字體家族

在CSS中常用的通用字體名稱:

  • cursive
  • fantasy
  • monospace
  • serif
  • sans-serif

    雖然在網頁設計和排版中還有許多其它的字體,比如slab-serif、blackletter、display、grunge等,但上述這五種通用字體是CSS Font Stack中經常被用到的。

    • Cursive (手寫體): 通常具有細而華麗的字母形式,模仿那些花俏的手寫文本。這些字體由於花哨,因此並不適合長篇內容。草書字體一般用於標題或較短的文字,同時使用較大字體尺寸來顯示。
    • Fantasy (另類體):這種是有些瘋狂的字體,不屬於任何其他類別,被一些知名的作品或商標使用,比如《哈利波特》或《回到未來》的標題就是使用這樣的字體形式。這種字體同樣也不適用於長篇文章,因為它們往往風格獨特,閱讀時比較難懂。
    • Monospace (等寬字體):其特點是大小相同、間隔一致,就像你在老式打字機列印出來的字體。與其他字體不同的是,字母的寬度根據大小而變化,例如大寫的W比小寫的i佔用的空間大得多,這種字體是使所有字元都使用一樣的寬度,這種字體經常被用於程式碼。
    • Serif (襯線體):在字形上採用了一些額外的連接點,這些額外的部分被稱為襯線。常見的襯線體就是Georgia和Times New Roman,襯線體很適合用於像標題以及長篇文字。
    • Sans-serif (無襯線體):顧名思義就是無襯線字體,也就是沒有額外的連接點,常見的包括Arial或Helvetica。與有襯線字體一樣,無襯線字體在標題以及長篇文字中也十分適合。但是有一些使用者更傾向于太多文字內容的地方,避免使用無襯線字體,尤其是在字體又很小的情況下會更難閱讀。