歡迎光臨
每天分享高質量文章

談談網頁設計中的字體應用(4):實戰應用篇·下

上次我講了在實際應用font-family時會遇到的瀏覽器兼容性問題。這次我 要從操作系統方面來講如何安排字體族。另外,由於中文字體的選擇範圍實在太小,所以本章中設計的內容主要以西文字體為主,比較適合上一章中的“方案二”。

– 不同操作系統的常用字體

如何讓你的字體在任何系統,任何電腦上都看起來一致?

原則很簡單。盡可能使用所有操作系統都存在的字體。雖然聽起來比較簡單,但是其實還是很tricky的一件事情。為此,你首先需要瞭解常用的操作系統的字體。

下麵我會列出一些除了windows以外的常用操作的預設字體。windows麽……想來大家應該已經很熟悉了

– Mac OS X 中的常用字體

一個典型安裝的 Mac OS X 10.4 會包含以下常用西文字體(某些非常用字體就不列出了):

– 典型的 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是我本人比較喜歡的一種非襯線字體。首先幾乎所有的系統都預設安裝了這個字體,所以不會存在兼容性問題,其次,這個字體也比較均衡,顯示段落也不錯。

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

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

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

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

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

Windows 操作系統的預設sans-serif 字體。沒啥好說的,永遠都不會用到的預設字體。

為啥同樣是預設字體,Helvetica 就這麼典雅呢? 哪怕就是用在font-family的開頭也是能獨擋一面的啦。

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

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

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

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

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

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

不過還好,等寬字體通常都是在寫代碼的時候有用,所以只要等寬就沒什麼大問題。類似於 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也沒問題,瀏覽器還是知道這是宋體,並且做出正確的字體搜索。可惜,不是所有瀏覽器都支持就是了……

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


來自:棕熊的博客

鏈接:http://www.cnblogs.com/ruxpinsp1/archive/2008/06/26/font-in-front-end-development-4.html



赞(0)

分享創造快樂