在Web編碼中，CSS預設應用的Web字型是有限的，雖然在新版本的CSS3，我們可以通過新增的@font-face屬性來引入特殊的瀏覽器載入字型。

但多數情況下，考慮各個因素的影響我們還是在儘量充分利用這些預設呼叫的字型實現CSS的編寫，這裡整理了20個Web安全字型，讓你無需任何顧慮的情況下暢快使用。

1,  Arial

微軟公司的網頁核心字型之一，最常用的sans serif字型，當字號很小時不容易閱讀。但是，大寫的“I”和小寫的“l”是無法區別的，你可以考慮用Tahoma字型來替代。
（蘋果系統沒有這種字型，但有一種對應於Arial的字型叫Helvetica，它是MAC機上與Arial 字型最相似的WEB字型,是別一種非襯線字型.它是一種效能優良的列印字型,但在螢幕上表現不是很好，說道Helvetica字型，昨天發現了很多有意思的站點，主要是紀念Helvetica字型誕生50年而設的。）

CSS寫法：font-family: Arial, Helvetica, sans-serif;

2, Arial Black

CSS寫法：font-family: ‘Arial Black’, Gadget, sans-serif;

3, Arial Narrow

CSS寫法：font-family: ‘Arial Narrow’, sans-serif;

4, Verdana

微軟公司的網頁核心字型之一，微軟公司專門為螢幕顯示而開發的。應用廣泛。易於閱讀。是顯示器中最清晰的字型，即使字號很小，也很容易閱讀。半肥貓比較喜歡採用10PX的Verdana來做英文正文字型，也推薦大家使用，但字號最好介於10~14畫素之間，超出這個範圍就不好看了。

CSS寫法：font-family: Verdana, Geneva, sans-serif;

5,  Georgia
微軟公司的網頁核心字型之一，可用性好。可讀性比Times New Roman強。是網站設計中，瀏覽效果最好的serif字型，因為它是專為網上閱讀設計的。）

CSS寫法：font-family: Georgia, serif;

6,  Times New Roman
微軟公司的網頁核心字型之一，可能是最常用的serif字型，是網站瀏覽器預設的字型，12pt以上的字型容易閱讀，但小字號的字型易讀性差。（蘋果系統沒有這個字型，有一個對應於Times New Roman的字型叫Times）

CSS寫法：font-family: 'Times New Roman', Times, serif;

7, Trebuchet MS
微軟公司的網頁核心字型之一，與Arial相似，半肥貓覺得：Trebuchet MS比Arial看起來優雅、古典一點。可以用來做標題，但小字號閱讀起來會很困難（低於13PIX閱讀起來就很累了，不太推薦用來做正文字型）。在蘋果系統上也可以用Helvetica做替代。

CSS寫法：font-family: 'Trebuchet MS', Helvetica, sans-serif;

8 , Courier New
微軟公司的網頁核心字型之一，老式印表機字型，有一種獨特的機械工整感覺。呈現計算機編碼時，還會用到這種字型。12 pt的Courier New字型曾是美國國務院的公文標準字型，但於2004年1月停用，改使用14 pt的Times New Roman，因為其具“現代性”和“易讀性”。

CSS寫法：font-family: 'Courier New', Courier, monospace;

9,  Impact
微軟公司的網頁核心字型之一，Impact是1965年發表的一個無襯線字型，其特粗的筆畫、緊縮的間距。半肥貓覺得：字型較為粗獷，適合使用在標題上，而不常用在內文。

CSS寫法：font-family: Impact, Charcoal, sans-serif;

10,  Comic Sans MS
微軟公司的網頁核心字型之一，手寫體。這是一種爭議很大的字型，講實話，半肥貓也不喜歡這個字型，一點美感都沒有，不過在一大堆規規矩矩的字型裡面，有這麼一個隨意性比較的字型，可以變換一下口味，也算不錯吧，建議不要用在正規的金融、政府、商業機構站點。

CSS寫法：font-family: 'Comic Sans MS', cursive;

11,  Tahoma
Tahoma是一個十分常見的無襯線字型，Tahoma和Verdana師出同為名設計師馬修·卡特的作品，由微軟在1999年推出，被採用為Windows 2000、Windows XP、Windows Server 2003等系統的預設字型。半肥貓覺得：它的字型結構和Verdana很相似，其字元間距較小，用來作為標題，效果好過Arial（Tahoma的大寫I 和小寫l比Arial容易識別），但如果作為正文，他的字號不能小於13PIX，否則很多筆畫粘連到一起，不利於閱讀。

CSS寫法：font-family: Tahoma, Geneva, sans-serif;

12,  Courier
Courier是一個等寬字型的粗襯線字型，主要是依據打字機所打印出來的字型來設計。原來Courier New的字型是IBM公司在1950年代設計給印表機使用的字型，後來這個字型成為整個打字機制造業的標準。Courier New是Courier的變體，比Courier更具機械味道。

CSS寫法：font-family: Courier, monospace;

13,  Lucida Sans Unicode
是一種OpenType型的無襯線字型 。1993年製作並隨微軟公司的Windows NT 3.1作業系統釋出。有較大的x字高，具有很好的可讀性，被廣泛用於顯示、出版等各種用途。
它支援Unicode2.0版本的基本字元，包括拉丁字母，希臘字母，西裡爾字母，希伯來字母，以及國際音標字元。該字型是首個 Unicode程式碼的字型， 該字型從Windows 98開始一直作為系統預裝字型發行。
後來釋出的 Lucida Grande字型作為蘋果公司Mac OS X系統的預設字型釋出。
CSS寫法：font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;

14, Lucida Console
同Lucida Sans Unicode類似。

CSS寫法：font-family: 'Lucida Console', Monaco, monospace;

15,  Garamond
Garamond（加拉蒙德）是一類西文襯線字型的總稱，自16世紀40年代開始至今，有很多家公司和很多設計師參與到Garamond字型設計，如： Adobe Garamond, Monotype Garamond, Sioncini Garamond，和 Stempel Garamond等等。半肥貓覺得：字型給人端莊典雅，有些古典的感覺，在博物館和歷史性悠久的專案中使用，應該可以獲得不錯的效果。

CSS寫法：font-family: Garamond, serif;

16 ,  MS Sans Serif
微軟系統自帶字型。螢幕顯示的畫素字型。非襯線字型。

CSS寫法：font-family: 'MS Sans Serif', Geneva, sans-serif;

17 ,  MS Serif
微軟系統自帶字型。螢幕顯示的畫素字型。襯線字型。
CSS寫法：font-family: 'MS Serif', 'New York', sans-serif;

18, Palatino Linotype

CSS寫法：font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;

19, Symbol

CSS寫法：font-family: Symbol, sans-serif;

20, Bookman Old Style

CSS寫法：font-family: 'Bookman Old Style', serif;

本文參考了WEB安全字型，希望在Web編寫過程中這些核心的Web字型能對你有用。

總結幾套實用而簡單的font-family

Tahoma 系的中性字型。推薦使用在13px以上的環境。

Verdana 系的寬扁字型。推薦在11px以下環境使用。

襯線字型的不二之選。

一系列等寬字型。寫程式碼很好用。另外，如果覺得Lucida Console太寬的話，可以換成比較窄的Lucida Sans Typewriter。話說老趙blog上的程式碼塊使用的就是Lucida Sans Typewriter 喲~

- 你知道嗎？

• 字型的別名

  系統中的一個字型是允許有多種別名形式存在的。比如，在windows 下，Georgia 也可以用 Georgia MS 來命名，它們其實是同一種字型。宋體的正式名稱是SimSon，而"宋體"只是它的別名。

  按照規範，瀏覽器應該能自動識別字體的別名，並對映到正確的字型檔案。比如，font-famliy: SimSon 和 font-family: "宋體" 應該具有等價的效果。可惜，似乎很多瀏覽器都不能正確執行前一條定義……
  
   

• 什麼時候在字型名稱前面加引號

  大家來看這個字型樣式定義：

  font-family: Times New Roman, 宋體, serif;

  很多人都會說，這個樣式寫法是錯的，因為 Times New Roman 和宋體都應該用引號括起來，像下面這樣：

  font-family: "Times New Roman", "宋體", serif;

  實際上呢，上面兩種寫法都是對的。和很多人想象中的不一樣，字型名稱外面的引號其實並非必須的。那麼加引號和不加引號有什麼區別呢？

  其實最大的不同在於對字型名稱中空白字元（如空格、製表符）的解釋。

  不加引號的時候，瀏覽器對於字型名稱中空白字元的解釋應該和XML中一樣，即忽略字型名稱左右的空白字元，並且單詞中間的空白字元被解釋為一個空格。比如 font-family:         Times       New Roman                , serif; 會被解釋成 font-family: Times New Roman, serif;
  
  
   

  加引號的時候，瀏覽器必須保留引號內所有的空白字元。如果寫成 font-family: "Times       New Roman"; 那麼瀏覽器不會顯示 Times New Roman 字型，而是搜尋一個叫做"Times       New Roman"的字型。
  
  
   

  至 於"宋體"這樣的字型名稱，因為中間沒有空白字元，因此完全沒有必要加引號。但是考慮到並非左右的作業系統都有漢字支援，並且並非所有的程式設計師都會注意 css檔案的正確編碼問題，所有保險起見，一般會加上引號。當然，解決這種問題的最好方法是使用別名。比如宋體，其實應該寫成SimSon，這樣哪怕瀏覽 者的系統不支援中文，並且這個css檔案被錯誤的編碼成了GB2132也沒問題，瀏覽器還是知道這是宋體，並且做出正確的字型搜尋。可惜，不是所有瀏覽器 都支援就是了……