IE7和IE8 在IE瀏覽器中正常顯示的字體效果設(shè)置教程
例如，我們使用以下的字體設(shè)置(先別管合理不合理)
font-family:Verdana,Tahoma,Arial,5b8b4f53(宋體),sans-serif
讓后分別放在IE6、IE7、IE8、Firefox、chrome等主流瀏覽器中測試 ， 發(fā)現(xiàn)在IE7和IE8瀏覽器中顯示英文和數(shù)字時字體有區(qū)別(見下圖)
Aisleep和88感覺上面有明顯的鋸齒而下面的感覺粗厚平滑一些 。
大家知道 ， 這是因為IE7/IE8瀏覽器中[屬性][高級]選項卡[多媒體]有一個ClearType(
增強屏幕字體)屬性，默認(rèn)是被選中的原因(見下圖) 。
如果把這個選項去掉勾，那IE7/IE8瀏覽器顯示的字體就和其它瀏覽器統(tǒng)一了 。反之，通過Windows控制面板ClearType Tuning 啟用ClearType(見下圖)
對于操作系統(tǒng)控制面板沒有ClearType Tuning選項的可以通過以下方式實現(xiàn)：
1. 單擊[開始] ， 單擊[控制面板]，單擊[外觀和主題]，然后單擊[顯示] 。
2. 在[外觀]選項卡上，單擊[效果] 。
3. 單擊選中[使用下列方式使屏幕字體的邊緣平滑]復(fù)選框，然后單擊該列表中的 ClearType[清晰] 。
那以其它瀏覽器顯示的字體就會和IE7/IE8統(tǒng)一了 。(注：據(jù)我調(diào)查大多數(shù)XP操作系統(tǒng)默認(rèn)為標(biāo)準(zhǔn))
接下來會看到一些測試和整理，目的只是為了解字體在不同設(shè)置下的特性 。這里不會有什么字體的推薦設(shè)置 ， 因為我認(rèn)為字體的設(shè)置和你所做項目的具體情況有關(guān)，沒有什么設(shè)置是最好的 ， 只要清楚字體在不同設(shè)置下的特性才能在以后的應(yīng)用中得心應(yīng)手 。
測試：12px和14px的字體大小是中文網(wǎng)頁中最常見的;字體family：黑體,宋體,sans-serif,Verdana,Tahoma,Arial,Helvetica(沒用雅黑字體，雅黑字體在Vista以后的操作系統(tǒng)才有，但根據(jù)網(wǎng)站數(shù)據(jù)統(tǒng)計80%都是XP操作系統(tǒng)，目前兼容性會是個問題);文字加粗容易分辨區(qū)別，瀏覽器：IE6/IE7/IE8/Firefox3.6/Chrome4.0 。
整理：
從 ClearType角度：除了IE7/IE8外其它瀏覽器字體顯示效果都是一樣的，如何統(tǒng)一所有字體顯示效果，方法上面已經(jīng)說過 。
* 黑體：字體大小12px/14px時 ClearType設(shè)置有作用(16px/18px/20px時無作用，22px以上會有作用);
* 宋體(5b8b4f53)：字體大小 12px/14px/16px/18px時ClearType設(shè)置無作用(20px以上會起作用) ， 所以 12px-18px之間的宋體在所有以上瀏覽器中能得到高度統(tǒng)一，但粗體的符號顯示真的很不理想比如@;
* sans- serif：無襯線字，細(xì)心的一定發(fā)現(xiàn)唯獨這類字體上圖中出現(xiàn)了三種字體 。在IE6和IE7/IE8中區(qū)別只是ClearType設(shè)置問題，字體其實就是Tahoma(無襯字)，但在FireFox和Chrome中調(diào)用的是宋體(襯字)(可設(shè)置);
* Verdana：ClearType設(shè)置會有作用 ， IE6/FireFox/Chrome中有明顯的鋸齒 。
* Tahoma：ClearType設(shè)置會有作用，IE6/FireFox/Chrome中有明顯的鋸齒 。(仔細(xì)觀察其實 Verdana和Tahoma字體外形是差不多的 ， 只是單詞中字母間距的區(qū)別 。)關(guān)于Verdana和Tahoma再延伸一下，之前看到過根據(jù) Jackob Nielsen用戶調(diào)研顯示，Verdana 字體是易讀性最高的，推薦設(shè)置為第一默認(rèn)字體，前提那是英文站點 。但在中文站點又要老生長談中英文排版問題 ， 具體用什么字體要考慮文章中是否有斜體、粗體：
o 當(dāng)ClearType設(shè)置為標(biāo)準(zhǔn)時，Tahoma比Verdana鋸齒感強 ， 而且Verdana字母的間距較寬的優(yōu)勢會體現(xiàn)出來 。
o 當(dāng)ClearType設(shè)置為清晰時，Verdana和Tahoma效果相近 。
至于說Verdana由于字母間距的問題導(dǎo)致中文結(jié)合時效果不佳，對平常的瀏覽和排版的影響是微乎的(Verdana的字體文章會更長一些)，如果我不那么刻意去比 ， 幾乎是看不出來的，何況是大多用戶(我做過測試把兩種字體的文章分開，分別給朋友、同事、家人等不是專業(yè)領(lǐng)域的人看，Ta們沒有任何意識，并且在我指出字體區(qū)別后 ， 他們對我說：你也太無聊了吧?) 。所以具體用什么字體時，最關(guān)鍵還是考慮字體用在什么對象(系統(tǒng)、訪問者)上，然后是字體是否會涉及到的變化：大小、斜體、粗體 。
* Arial 和Helvetica：以上瀏覽器中視覺上幾乎是一致的(IE7/IE8中感覺上顏色偏深一些)，無鋸齒感覺，但和Verdana、Tahoma 比起來整體偏小很多 ?？梢园炎煮w設(shè)置的大一些，CSS樣式中就會多一行特殊的定義 。
網(wǎng)絡(luò)上有人整理相關(guān)的字型設(shè)定 ， 我把它轉(zhuǎn)給過，給需要的網(wǎng)頁設(shè)計師參考 。
font-family: Arial, Helvetica, sans-serif;
font-family: Arial Black, Gadget, sans-serif;
font-family: Bookman Old Style, serif;
font-family: Comic Sans MS, cursive;
font-family: Courier, monospace;
font-family: Courier New, Courier, monospace;
font-family: Garamond, serif;
font-family: Georgia, serif;
font-family: Impact, Charcoal, sans-serif;
font-family: Lucida Console, Monaco, monospace;
font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;
font-family: MS Sans Serif, Geneva, sans-serif;
font-family: MS Serif, New York, sans-serif;
font-family: Palatino Linotype, Book Antiqua, Palatino, serif;
font-family: Symbol, sans-serif;
font-family: Tahoma, Geneva, sans-serif;
font-family: Times New Roman, Times, serif;
font-family: Trebuchet MS, Helvetica, sans-serif;
font-family: Verdana, Geneva, sans-serif;
font-family: Webdings, sans-serif;
【IE7和IE8 在IE瀏覽器中正常顯示的字體效果設(shè)置教程】font-family: Wingdings, Zapf Dingbats, sans-serif;
相關(guān)經(jīng)驗推薦
- 正確刪除IE8瀏覽器并恢復(fù)到IE7的方法
- 微信發(fā)15和15個句號會怎樣 微信數(shù)字加15個句號卡死怎么辦
- css控制圖片按等比例縮放實例兼容IE6/IE7/火狐/谷歌
- 針對firefox ie6 ie7 ie8的css樣式hack
- CSS 完美兼容IE6/IE7/FF的通用hack方法
- DIV 邊距屬性在Chrome和IE中的區(qū)別深入理解
- 抖音熱到爆炸熱到和太陽肩并肩GIF表情包
- IE盒子模型和標(biāo)準(zhǔn)W3C盒子模型
- 已補全 IE6,IE7,IE8下使用Javascript記錄光標(biāo)選中范圍
- 支持IE6/IE7/IE8/Firefox3 本地圖片預(yù)覽經(jīng)驗總結(jié)