網頁字體在不同浏覽器顯示不同結果
編輯：關於網頁技巧
網頁制作poluoluo文章簡介：常用網頁字體在不同浏覽器中的效果.
網站中常用見的字體就是“宋體”。但現在很多電子商務網站都會有標價，這就涉及到了符號和數字，然後品牌和內容中又會有英文和字母，這就又涉及到英文字體，光用“宋體”會不協調。因為“宋體”本身是為中文字符設計的，符號、數字和英文、字母當然也應該使用英文字體來定義顯示才會更合適。前幾天做一個項目我們決定使用 font-family:Verdana,Tahoma,Arial,\5b8b\4f53(宋體),sans-serif 的字體顯示順序（先別管合理不合理），我們測試了IE6/IE7/IE8/Firefox/chrome/(使用以上幾款浏覽器訪問我們網站的用戶加起來占90%以上)，在IE7/IE8浏覽器中顯示英文和數字時字體有區別（見下圖）
“Aisleep”和“88”感覺上面有明顯的鋸齒而下面的感覺粗厚平滑一些。
大家知道，這是因為IE7/IE8浏覽器中[屬性] > [高級]選項卡 > [多媒體]有一個ClearType(
增強屏幕字體)屬性，默認是被選中的原因(見下圖)。
如果把這個選項去掉勾，那IE7/IE8浏覽器顯示的字體就和其它浏覽器統一了。反之，通過Windows控制面板 > ClearType Tuning 啟用ClearType（見下圖）
對於操作系統控制面板沒有ClearType Tuning選項的可以通過以下方式實現：
1. 單擊[開始]，單擊[控制面板]，單擊[外觀和主題]， 然後單擊[顯示]。
2. 在[外觀]選項卡上，單擊[效果]。
3. 單擊選中[使用下列方式使屏幕字體的邊緣平滑]復選框，然後單擊該列表中的 ClearType[清晰]。
那以其它浏覽器顯示的字體就會和IE7/IE8統一了。(注：據我調查大多數XP操作系統默認為“標准”)
接下來會看到一些測試和整理，目的只是為了解字體在不同設置下的特性。這裡不會有什麼字體的推薦設置，因為我認為字體的設置和你所做項目的具體情況有關，沒有什麼設置是最好的，只要清楚字體在不同設置下的特性才能在以後的應用中得心應手。
測試：12px和14px的字體大小是中文網頁中最常見的；字體family：黑體,宋體,sans-serif,Verdana,Tahoma,Arial,Helvetica(沒用雅黑字體，雅黑字體在Vista以後的操作系統才有，但根據網站數據統計80%都是XP操作系統，目前兼容性會是個問題)；文字加粗容易分辨區別，浏覽器：IE6/IE7/IE8/Firefox3.6/Chrome4.0。下圖顯示效果不好，這裡訪問→http://docs.google.com/View?id=ds4hm4h_241f5cpdkff
整理：
從 ClearType角度：除了IE7/IE8外其它浏覽器字體顯示效果都是一樣的，如何統一所有字體顯示效果，方法上面已經說過。
* 黑體：字體大小12px/14px時 ClearType設置有作用（16px/18px/20px時無作用，22px以上會有作用）；
* 宋體（\5b8b\4f53）：字體大小 12px/14px/16px/18px時ClearType設置無作用（20px以上會起作用），所以 12px-18px之間的宋體在所有以上浏覽器中能得到高度統一，但粗體的符號顯示真的很不理想比如"@"；
* sans- serif：無襯線字，細心的一定發現唯獨這類字體上圖中出現了三種字體。在IE6和IE7/IE8中區別只是ClearType設置問題，字體其實就是Tahoma(無襯字)，但在FireFox和Chrome中調用的是宋體（襯字）（可設置）；
* Verdana：ClearType設置會有作用，IE6/FireFox/Chrome中有明顯的鋸齒。
* Tahoma：ClearType設置會有作用，IE6/FireFox/Chrome中有明顯的鋸齒。(仔細觀察其實 Verdana和Tahoma字體外形是差不多的，只是單詞中字母間距的區別。)關於Verdana和Tahoma再延伸一下，之前看到過根據 Jackob Nielsen用戶調研顯示，Verdana 字體是易讀性最高的，推薦設置為第一默認字體，前提那是英文站點。但在中文站點又要老生長談中英文排版問題，具體用什麼字體要考慮文章中是否有斜體、粗體：
o 當ClearType設置為“標准”時，Tahoma比Verdana鋸齒感強，而且Verdana字母的間距較寬的優勢會體現出來。
o 當ClearType設置為“清晰”時，Verdana和Tahoma效果相近。
至於說Verdana由於字母間距的問題導致中文結合時效果不佳，各位有時間可以看看樣稿http://docs.google.com/Doc?id=ds4hm4h_2619p8gqhp，對平常的浏覽和排版的影響是微乎的（Verdana的字體文章會更長一些），如果我不那麼刻意去比，幾乎是看不出來的，何況是大多用戶（我做過測試把兩種字體的文章分開，分別給朋友、同事、家人等不是專業領域的人看，Ta們沒有任何意識，並且在我指出字體區別後，他們對我說：“你也太無聊了吧？”）。所以具體用什麼字體時，最關鍵還是考慮字體用在什麼對象(系統、訪問者)上，然後是字體是否會涉及到的變化：大小、斜體、粗體。
* Arial 和Helvetica：以上浏覽器中視覺上幾乎是一致的（IE7/IE8中感覺上顏色偏深一些），無鋸齒感覺，但和Verdana、Tahoma 比起來整體偏小很多。可以把字體設置的大一些，CSS樣式中就會多一行特殊的定義。
本文來源：http://www.08show.com/blog/article.asp?id=337
小編推薦
熱門推薦