上次我講了在實際應(yīng)用font-family時會遇到的瀏覽器兼容性問題。這次我 要從操作系統(tǒng)方面來講如何安排字體族。另外，由于中文字體的選擇范圍實在太小，所以本章中設(shè)計的內(nèi)容主要以西文字體為主，比較適合上一章中的“方案二”。
- 不同操作系統(tǒng)的常用字體
如何讓你的字體在任何系統(tǒng)，任何電腦上都看起來一致？
原則很簡單。盡可能使用所有操作系統(tǒng)都存在的字體。雖然聽起來比較簡單，但是其實還是很tricky的一件事情。為此，你首先需要了解常用的操作系統(tǒng)的字體。
下面我會列出一些除了windows以外的常用操作的默認(rèn)字體。windows么……想來大家應(yīng)該已經(jīng)很熟悉了
- Mac OS X 中的常用字體
一個典型安裝的 Mac OS X 10.4 會包含以下常用西文字體（某些非常用字體就不列出了）：
- 典型的 Linux 字體
典型的Linux只有kernel，所以字體要自己安裝
既然這樣，自然無法正確預(yù)測使用Linux的用戶裝了啥字體。不過好在大家都會裝一些常用的字體，因此不會有什么大問題。
- 比較各個操作系統(tǒng)的字體，我們會發(fā)現(xiàn)——
其實，windows 常用的字體其它操作系統(tǒng)都有，甚至很多人認(rèn)為windows only 的 Arial 字體也不例外~
不少設(shè)計師都認(rèn)為 Arial 是個不典雅的字體，所以希望在 Mac 上能用更經(jīng)典的 Helvetica 字體來代替，于是產(chǎn)生了這種代碼：
font-family: Arial, Helvetica, sans-serif;
但是因為Mac OS 其實也有Arial 字體，所以永遠(yuǎn)都只會顯示Arial
其實這種問題，只要稍加修改就OK了啦：
font-family: Helvetica, Arial, sans-serif;
但是事情往往不是這么簡單的。比如上面的Mac OS X字體表中，由個 Lucida Grande 字體。照理說這個字體是Mac only的，所以大家理應(yīng)可以放心的這么寫：
font-family: "Lucida Grande", Arial, sans-serif;
那么Mac用戶可以看到Lucida Grande, 而PC用戶可以看到Arial字體。多好的應(yīng)用典范。
但是實際上呢，不少PC用戶居然看到了亂碼，而不是 Arial 字體
怎么回事呢？因為市面上有不少字體下載網(wǎng)站，而上面就有那個Lucida Grande下載。可惜這個廣為流傳的 Lucida Grande 是個rip版，而且rip的時候有缺陷，導(dǎo)致所有換行字符都會顯示成一個亂碼……
——囧大了
不要說這種事情只會在亂裝英文字體的用戶上發(fā)生喲。能在XP上顯示微軟雅黑的，不都是rip版的嘛——那個網(wǎng)上廣為流傳的版本，也存在著類似缺陷，只不過不至于嚴(yán)重到產(chǎn)生亂碼而已。所以在選擇字體時需要注意一下。
- 常用西文字體介紹
Tahoma是我本人比較喜歡的一種非襯線字體。首先幾乎所有的系統(tǒng)都默認(rèn)安裝了這個字體，所以不會存在兼容性問題，其次，這個字體也比較均衡，顯示段落也不錯。
說老實話，Verdana太寬了，不適合中英文混排。很多時候Verdana的一個字母都要比同樣size的中文字符寬了。國外設(shè)計師喜歡用Verdana, 很多時候是因為Verdana 11px以下的小字效果的確十分理想，但是國內(nèi)很多設(shè)計師想也不想就照搬過來，并用在12px 乃至14px的布局上，導(dǎo)致本來就局促的空間更顯緊張，所以不推薦作為font-family 打頭陣的字體。
如果要使用Verdana字體的話，就一定要考慮它和一般系統(tǒng)default的sans-serif字體之間的大小差距。不論和Helvetica 或者Arial 比起來，Verdana都大得多了。不過好在幾乎所有的系統(tǒng)也都會默認(rèn)安裝這個字體……
Trebuchet MS 是個很多人都會忽視的字體。其實我個人也比較欣賞這個字體的。與其使用Verdana, 還不如用這個線條更圓潤的的字體來替代。對各種操作系統(tǒng)也有很好的支持。
缺點(diǎn)是和Verdana一樣，因為過寬，而不適合用在中英文混排。也要注意和default sans-serif font 寬度差距的問題。
因為考慮到有些Linux 系統(tǒng)可能不會安裝這個字體，所以如果要用在一個font-family的開頭話，可以使用Verdana 做后續(xù)字體。
Windows 操作系統(tǒng)的默認(rèn)sans-serif 字體。沒啥好說的，永遠(yuǎn)都不會用到的默認(rèn)字體。
為啥同樣是默認(rèn)字體，Helvetica 就這么典雅呢？ 哪怕就是用在font-family的開頭也是能獨(dú)擋一面的啦。
另外，這里有個 Helvetica 和 Arial 打架的flash游戲~ 像超級瑪利一樣踩 Arial 字符就可以了。順便沒有 Helvetica 字體的人可以看一下兩個字體的具體區(qū)別~ 茶~
我最喜歡用的 serif 字體。不僅很適合做正文，也適合做標(biāo)題。尤其是意大利體的 Georgia Italic 更是魅力難擋。缺點(diǎn)仍舊是不適宜和漢字混排，因為Georgia的襯線哪怕對于宋體來說也太重了，所以看上去硬邦邦的……
Windows 的默認(rèn)serif 字體。沒啥好說的，西文字體的元老了。很多字體，比如大家都熟悉的Courier New都是從Times New Roman派生出來的。
不過現(xiàn)在印刷業(yè)都很少用這個字體了，更多的是在用它的后代——Times Europa 和 Times Europa Office。
在具體的網(wǎng)頁字體應(yīng)用上，要注意同樣字號的Times New Roman比普通字體小的多，所以一定要考慮進(jìn)字體大小的變化
常用的等寬字體之一。其實等寬字體的選擇比較小啦，所以基本上要兼容所有系統(tǒng)，也就只能選這個字體了。
不過還好，等寬字體通常都是在寫代碼的時候有用，所以只要等寬就沒什么大問題。類似于 Lucida Sans Typewriter, Lucida Console, Monaco 之類的字體也都很好用。
- 綜上所述，總結(jié)幾套實用而簡單的font-family
font-family: Tahoma, Helvetica, Arial, sans-serif;
Tahoma 系的中性字體。推薦使用在13px以上的環(huán)境。
font-family: Trebuchet MS, Verdana, Helvetica, Arial, sans-serif;
Verdana 系的寬扁字體。推薦在11px以下環(huán)境使用。
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 喲~
- 你知道嗎？
字體的別名系統(tǒng)中的一個字體是允許有多種別名形式存在的。比如，在windows 下，Georgia 也可以用 Georgia MS 來命名，它們其實是同一種字體。宋體的正式名稱是SimSon，而“宋體”只是它的別名。按照規(guī)范，瀏覽器應(yīng)該能自動識別字體的別名，并映射到正確的字體文件。比如，font-famliy: SimSon 和 font-family: “宋體” 應(yīng)該具有等價的效果?？上В坪鹾芏酁g覽器都不能正確執(zhí)行前一條定義……
什么時候在字體名稱前面加引號大家來看這個字體樣式定義：
font-family: Times New Roman, 宋體, serif;
很多人都會說，這個樣式寫法是錯的，因為 Times New Roman 和宋體都應(yīng)該用引號括起來，像下面這樣：
font-family: "Times New Roman", "宋體", serif;
實際上呢，上面兩種寫法都是對的。和很多人想象中的不一樣，字體名稱外面的引號其實并非必須的。那么加引號和不加引號有什么區(qū)別呢？
其實最大的不同在于對字體名稱中空白字符（如空格、制表符）的解釋。
不加引號的時候，瀏覽器對于字體名稱中空白字符的解釋應(yīng)該和XML中一樣，即忽略字體名稱左右的空白字符，并且單詞中間的空白字符被解釋為一個空格。比如 font-family: Times New Roman , serif; 會被解釋成 font-family: Times New Roman, serif;
加引號的時候，瀏覽器必須保留引號內(nèi)所有的空白字符。如果寫成 font-family: “Times New Roman”; 那么瀏覽器不會顯示 Times New Roman 字體，而是搜索一個叫做“Times New Roman”的字體。
至于“宋體”這樣的字體名稱，因為中間沒有空白字符，因此完全沒有必要加引號。但是考慮到并非左右的操作系統(tǒng)都有漢字支持，并且并非所有的程序員都會注意css文件的正確編碼問題，所有保險起見，一般會加上引號。當(dāng)然，解決這種問題的最好方法是使用別名。比如宋體，其實應(yīng)該寫成SimSon，這樣哪怕瀏覽者的系統(tǒng)不支持中文，并且這個css文件被錯誤的編碼成了GB2132也沒問題，瀏覽器還是知道這是宋體，并且做出正確的字體搜索?？上В皇撬袨g覽器都支持就是了……
網(wǎng)頁設(shè)計中的字體應(yīng)用這個專題就講到這里了，希望對大家有所幫助。下次我打算講一下在項目中如何應(yīng)用樣式表管理，適合稍微有些樣式表基礎(chǔ)，并且正在參與、或者有意參與大型開發(fā)項目的朋友們聽哦~ 其中還可能穿插一些小文章，解釋一些實際工作中大家遇到的容易誤解的地方。不過最近偶會比較忙一些，所以可能會花些時間來寫，請大家耐心等待啦。
來自：棕熊的博客
鏈接：http://www.cnblogs.com/ruxpinsp1/archive/2008/06/26/font-in-front-end-development-4.html
聯(lián)系客服
