優雅設定網頁文字字型[原創]

標籤：blog   http   os   ar   使用   sp   div   on   2014   

微軟XP在國內實在是在“深入人心”，雖然微軟已經宣布XP“死期”已到，但國內還是大是大把XP使用者，這個從IE6在國內佔有率為22.2%可以看到。

 

 

詳細查看：https://www.modern.ie/en-us/ie6countdown#list

XP已經為大家服務10多年了，TA已經很老了，微軟也宣布停止支援XP了，這本是件好事，但國內各種廠隨後宣布繼續為XP使用者“保架護航”提供支援，這不能不說是個好事，但對於天天與IE6相容性打交道的WEB前端們來講，還真不是件好事！

 

這導致國內大多中文網站預設字型還要考慮“宋體”優先，但是“宋體”在Windows Vista+上面大大不如“微軟雅黑”的豐滿銳利，請看：

那為何不優先“微軟雅黑”呢？一段代碼的事啊。

1	font-family: ‘微軟雅黑‘,’宋體’...

這一句不就解決問題了？開始我也這麼認為：Vista+使用者預設內建“微軟雅黑”字型就會看到更好的網頁文字渲染效果，XP使用者預設內建“宋體”自然會看到宋體版網頁。看起來挺完美的，好吧，來看張對比圖：

XP下，左邊是宋體，右邊是微軟雅黑。

這下反過來了，XP下宋體顯示效果比微軟雅黑銳利均勻，好多了，其它瀏覽器顯示效果也很差。可見上面方案確定已經失敗。你或者反駁，這是你測試用的，XP預設是沒有微軟雅黑的，可以忽略。是的，但國內大多用的盜版，網上查了下各種廠商XP Ghost版本已經好心的幫使用者裝上了微軟雅黑，當然必須內建了他們廠商賺錢的軟體、網址導航等，還有部分設計等需要自己安裝上的，所以此路真的不通。

 

那還是預設宋體吧，坐等XP完全消失那天。

不用，我們來分析一下，XP用的最多的應該是預設IE6，最大也只支援到IE8，那就好辦了，專門針對IE8至IE6用hack專門寫個樣式：

1	font-family: sans-serif;

就好了，至於XP下使用其它瀏覽器的，就先不考慮了，能自己選擇瀏覽器的人應該也能換個更好的系統，是吧。

下面看下“font-family: sans-serif;”下的顯示

XP系統IE6顯示：

哇，很贊，而且可以看到左邊中英文混排情況下，英文顯示的更為漂亮哦。（右邊固定字型的中英混排英文顯示有些難看）

 

Win8系統IE11顯示：

左右顯示一致，以系統預設字型微軟雅黑顯示。

 

Win8系統opera下：

這個不盡人意，左邊是以預設宋體顯示的，這種情況會發生在其它第三方瀏覽器上，如：Firefox\Chrome等。

 

 

OS X Mavericks系統Safari 7.0下：

顯示也非常完善，英文略有差異，不過都非常棒。

 

想線上查看各種系統和裝置顯示示可訪問微軟官方出品（包括各種OS下，各種手機、pad裝置下顯示）：
https://modern.ie/zh-cn/screenshots

 

請原諒我的語無倫次吧，綜上所述：
上面方法還是不夠完善的，在最新Windows系統上第三方瀏覽器還是會以宋體顯示（這取決於各個瀏覽器預設樣式的字型定義），所以，最終結果是非常不推薦使用。

但無意中發現如果存在中英文混排，倒是可以使用

font-family: sans-serif

這絕對是個不錯的選擇。

 

優雅設定網頁文字字型[原創]