- 典型的 Linux 字體

典型的Linux只有kernel，所以字體要自己安裝

既然這樣，自然無法正確預測使用Linux的用戶裝了啥字體。不過好在大家都會裝一些常用的字體，因此不會有什么大問題。

- 比較各個操作系統的字體，我們會發現——

其實，windows 常用的字體其它操作系統都有，甚至很多人認為windows only 的 Arial 字體也不例外~

不少設計師都認為 Arial 是個不典雅的字體，所以希望在 Mac 上能用更經典的 Helvetica 字體來代替，于是產生了這種代碼：

font-family: Arial, Helvetica, sans-serif;

但是因為Mac OS 其實也有Arial 字體，所以永遠都只會顯示Arial

其實這種問題，只要稍加修改就OK了啦：

font-family: Helvetica, Arial, sans-serif;

但是事情往往不是這么簡單的。比如上面的Mac OS X字體表中，由個 Lucida Grande 字體。照理說這個字體是Mac only的，所以大家理應可以放心的這么寫：

font-family: "Lucida Grande", Arial, sans-serif;

那么Mac用戶可以看到Lucida Grande, 而PC用戶可以看到Arial字體。多好的應用典范。

但是實際上呢，不少PC用戶居然看到了亂碼，而不是 Arial 字體

怎么回事呢？因為市面上有不少字體下載網站，而上面就有那個Lucida Grande下載。可惜這個廣為流傳的 Lucida Grande 是個rip版，而且rip的時候有缺陷，導致所有換行字符都會顯示成一個亂碼……

——囧大了

不要說這種事情只會在亂裝英文字體的用戶上發生喲。能在XP上顯示微軟雅黑的，不都是rip版的嘛——那個網上廣為流傳的版本，也存在著類似缺陷，只不過不至于嚴重到產生亂碼而已。所以在選擇字體時需要注意一下。

- 常用西文字體介紹

Tahoma 16px  Tahoma 14px  Tahoma 12px

Tahoma是我本人比較喜歡的一種非襯線字體。首先幾乎所有的系統都默認安裝了這個字體，所以不會存在兼容性問題，其次，這個字體也比較均衡，顯示段落也不錯。

Verdana 16px  Verdana 14px  Verdana 12px

說老實話，Verdana太寬了，不適合中英文混排。很多時候Verdana的一個字母都要比同樣size的中文字符寬了。國外設計師喜歡用 Verdana, 很多時候是因為Verdana 11px以下的小字效果的確十分理想，但是國內很多設計師想也不想就照搬過來，并用在12px 乃至14px的布局上，導致本來就局促的空間更顯緊張，所以不推薦作為font-family 打頭陣的字體。

如果要使用Verdana字體的話，就一定要考慮它和一般系統default的sans-serif字體之間的大小差距。不論和Helvetica 或者Arial 比起來，Verdana都大得多了。不過好在幾乎所有的系統也都會默認安裝這個字體……

Trebuchet MS 16px  Trebuchet MS 14px  Trebuchet MS 12px

Trebuchet MS 是個很多人都會忽視的字體。其實我個人也比較欣賞這個字體的。與其使用Verdana, 還不如用這個線條更圓潤的的字體來替代。對各種操作系統也有很好的支持。

缺點是和Verdana一樣，因為過寬，而不適合用在中英文混排。也要注意和default sans-serif font 寬度差距的問題。

因為考慮到有些Linux 系統可能不會安裝這個字體，所以如果要用在一個font-family的開頭話，可以使用Verdana 做后續字體。

Arial 16px  Arial 14px  Arial 12px

Windows 操作系統的默認sans-serif 字體。沒啥好說的，永遠都不會用到的默認字體。

Helvetica 16px  Helvetica 14px  Helvetica 12px

為啥同樣是默認字體，Helvetica 就這么典雅呢？  哪怕就是用在font-family的開頭也是能獨擋一面的啦。

另外，這里有個 Helvetica 和 Arial 打架的flash游戲~ 像超級瑪利一樣踩 Arial 字符就可以了。順便沒有 Helvetica 字體的人可以看一下兩個字體的具體區別~ 茶~

Georgia 16px  Georgia 14px  Georgia 12px

我最喜歡用的 serif 字體。不僅很適合做正文，也適合做標題。尤其是意大利體的 Georgia Italic 更是魅力難擋。缺點仍舊是不適宜和漢字混排，因為Georgia的襯線哪怕對于宋體來說也太重了，所以看上去硬邦邦的……

Times New Roman 16px  Times New Roman 14px  Times New Roman 12px

Windows 的默認serif 字體。沒啥好說的，西文字體的元老了。很多字體，比如大家都熟悉的Courier New都是從Times New Roman派生出來的。

不過現在印刷業都很少用這個字體了，更多的是在用它的后代——Times Europa 和 Times Europa Office。

在具體的網頁字體應用上，要注意同樣字號的Times New Roman比普通字體小的多，所以一定要考慮進字體大小的變化

Courier New 16px  Courier New 14px  Courier New 12px

常用的等寬字體之一。其實等寬字體的選擇比較小啦，所以基本上要兼容所有系統，也就只能選這個字體了。

不過還好，等寬字體通常都是在寫代碼的時候有用，所以只要等寬就沒什么大問題。類似于 Lucida Sans Typewriter, Lucida Console, Monaco 之類的字體也都很好用。

- 綜上所述，總結幾套實用而簡單的font-family

font-family: Tahoma, Helvetica, Arial, sans-serif;

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

font-family: Trebuchet MS, Verdana, Helvetica, Arial, sans-serif;

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

font-family: Geogia, Times New Roman, Times, serif;

襯線字體的不二之選。

font-family: Lucida Console, Monaco, Courier New, mono, monospace;

一系列等寬字體。寫代碼很好用。另外，如果覺得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也沒問題，瀏覽器還是知道這是宋體，并且做出正確的字體搜索。可惜，不是所有瀏覽器 都支持就是了……

網頁設計中的字體應用這個專題就講到這里了，希望對大家有所幫助。下次我打算講一下在項目中如何應用樣式表管理，適合稍微有些樣式表基礎，并且正在 參與、或者有意參與大型開發項目的朋友們聽哦~ 其中還可能穿插一些小文章，解釋一些實際工作中大家遇到的容易誤解的地方。不過最近偶會比較忙一些，所以可能會花些時間來寫，請大家耐心等待啦。