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