網頁制作Poluoluo文章簡介:設計經驗:談談web的默認字體.
1. 優先級的描述不嚴謹,有 !important 時,網頁樣式可以覆蓋用戶自定義樣式。用戶!important > 網頁!important > 用戶 > 網頁 > 浏覽器默認。
2. Tahoma 字體從 Win95 就有了,並且從 Win2000 開始,Tahoma 成為 Win 英文系統的默認字體。2007 年,在 Mac OS X v10.5 (Leopard) 中也開始內置 Tahoma 字體。至今,普及性還是相當不錯的。
3. Google, YAHOO 等網站,首選 Arial, 個人覺得是出於兼容性考慮。Google 需要考慮到對各種設備的支持,這就和 Google 首頁繼續采用 table 布局一樣,table 布局可以保證在盡可能多的用戶終端中正確顯示。Arial 字體同理。
4. 但這並不代表 Google 等頁面的做法就是最好的。從漸進增強角度講,font-family: Tahoma, Helvetica, Arial, sans-serif; 可以達到優雅降級的目的。在更好的用戶代理中,顯示更好的字體,同時用 Arial 殿後,也能保證在盡可能多終端設備中正確顯示。漸進增強無處不在,需要我們的共同努力和推廣。(注:考慮 Mac 用戶,Leopard 中內置了 Tahoma 字體,因此 font-family: Helvetica, Tahoma, Arial, sans-serif; 會更漸進增強一些)
5. 不推薦省略默認字體族。這就和省略 </body> 一樣,99.99% 的情況下不會導致問題,並且是一種優化手段。但除了特殊頁面(比如 Google 首頁),普通頁面普通流量下,節省這一點字符,不利於 Web 標准的整體進步。
6. 不設置宋體,在 GBK 編碼時,英文操作系統下,IE 的默認字體是 Microsoft Sans Serif Regular. (注:不設置 sans-serif 可以避免此問題,但考慮上面第 5 條,依舊推薦前面加“宋體”來解決該問題)
7. 根據可用性大師 Jackob Nielsen 的調查,在目前計算機顯示器的 dpi 下,無襯線字體比有襯線字體更易讀。用戶調研顯示,Verdana 字體是易讀性最高的,推薦設置為第一默認字體。這一點,可以參考 ALA 的字體設置,閱讀起來的確很舒服。
8. Tahoma 字體的問題是,斜體時,特別是小號時,文字不易閱讀,還有就是小麥總結過的下劃線問題。Verdana 字體的問題是,字號相同時,比其它字體顯示偏大偏寬,這導致混排時效果不佳。考慮中文網頁中,一般很少用斜體,因此 Tahoma 依舊是首選。
9. 關於默認行高,對於博客等以大段文字為主的應用來說,1.5 是個很不錯的選擇。但對於淘寶的大部分頁面來說,1.5 會導致 li, hx, div 等所有元素的默認行高都是 1.5, 這會給實際工作帶來不少重置工作量和某些詭異 bug(小虎 & 有腳,趕快總結哦)。我更傾向於 body { line-height: 1; } p { line-height: 1.5; }
10. 字體對性能和效率的影響,可以忽略。有時候,勿以善小而為之。97% 的情況下,不成熟的優化是萬惡之源。
11. 未來:若干年後,隨著顯示器 dpi 的提高,網頁默認字體很可能會和傳統印刷業的推薦字體一致 —— 采用襯線字體。等以後再說了。
最後,我的推薦是:
body { font: 12px/1 Helvetica, Tahoma, Arial, \5b8b\4f53, sans-serif; } p { line-height: 1.5; }
歡迎討論。