環境： ie6 （window sp3） ie7,8,9 firefox3.6， chrome10，opera?10.62 （window7）

本文先列舉出幾種常見的字體的顯示問題以及優點，然后再列舉幾個web字體的最佳實踐，一一作一分析。

1） Tahoma&&?Arial字體比較

（1）字體下劃線問題：Tahoma在ie6下的li元素里面顯示很好，其他的所有瀏覽器中，下劃線都會粘連中文文字，英文問題沒有粘連；但是Arial字體除了ie6，firefox3.6?，其他瀏覽器都是下劃線粘貼著文字。

（2）13px中文問題：ie6 和firefox3.6 顯示很難看，用的是14號字體，其他瀏覽器都用12px字體顯示的（Arial字體比Tahoma字體好看點）；

（3） 中英文混排問題：同一行中出現了中文和英文，如果設置了vertical-align屬性，會出現高低不齊的現象。ie7出現了錯位。zoom:1可以解決一部分問題。

（4）設置Tahoma字體后可以使表單元素和label對齊（比如radio,check ,text,select和相應的文本對齊，同時設置兩者 vertical-align:middle ）?

2）宋體的問題（又名SimSun），unicode 編碼?\5b8b\4f53

（1）?Opera 下，只認 "宋體"， 不認 SimSun

eg：font: 12px arial; 此時，Opera 默認中文字體就是宋體，font: 12px sans-serif; 此時，Opera 默認中文字體就是宋體。
font: 12px tahoma,arial,simsun,sans-serif; 對于'宋體'來說，如果后面已經沒有中文字體，用 simsun 還是 ok 的。?

3）helvetica的問題

（1）找不到字體的時候，使用默認字體。

（2）如果用?font: 12px helvetica2,tahoma; 定義字體時，會調用排在第二的 tahoma.?

（3）?font: 12px xxx,tahoma; 一切正常?

4）關于行高

（1）font: 12px/1 \5b8b\4f53; 行高為 1 時，IE6-7 下，高度不夠時，會導致中文上下顯示不全。?

（2）font: 12px/1.5 \5b8b\4f53; 行高為 1.5 時，一切正常。?文章中推薦使用1.5

?5）中文編碼對字體的影響

（1）如果沒有設置宋體，在非中文操作系統中很難看。

（2）可以通過不設置sans-serif?來避免上面的問題。

6）關于sans-serif字體?

就是無襯線字體，是一種通用字體族。

常見的無襯線字體有 Trebuchet MS, Tahoma, Verdana, Arial, Helvetica, 中文的幼圓、隸書等等。

font-family最后加上sans-serif，也是為了保證能夠調用這個字體族里面的字體，因為大多數計算機里都有這種字體。

?7）字體繼承方面：在IE里，所有的表單元素都不繼承body的字體屬性，需要單獨設置?。?

?總結：

方案一：body {font-family: Arial, sans-serif; }該方案能解決在ie6下的問題，但是該方案對表單對齊沒有優勢。

方案二：body {font-family: Tahoma, sans-serif; }?該方案不能很好的解決在ie6下的下劃線問題，此外在ie6下對于13px的字體也不能很好的支持。

方案三：?body {font: 12px/1.5 tahoma, arial, simsun, sans-serif;} 比較tahoma 和arial字體，arial在ie6下使用較少。顧推薦。

方案四：body {font: 12px/1.5 tahoma, arial, \5b8b\4f53;} 使用unicode字符，支持各種格式。

此外不使用sans-serif，在非中文操作系統的不會出現很難看。我推薦方案四。

?

?

?

??

轉載于:https://www.cnblogs.com/yupeng/archive/2011/04/08/2009900.html

總結

以上是生活随笔為你收集整理的web默认字体最佳实践的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。