MAC下的網頁設計中文字體優化
最近某人吐槽某門戶網站在MAC下Chrome瀏覽器字體超醜,然後發現雖然現在MAC用戶越來越多,但是大家依然無視MAC下的字體差異,於是研究了下MAC下網頁設計中的中文字體,和大家分享。
看了一遍國內各大門戶和SNS網站,雖然可能大家的font-family設置都不太一樣,但是貌似現在只有QQ空間對MAC下字體做了優化。
ok,言歸正傳。
MAC和Windows自帶的字體非常不一樣,所以,針對Windows的font-family設置一般不適用於MAC系統,而在mac下,會調用系統默認的細黑體(STXihei),而這個字體渲染的其實並不是很好看。
優化的方法有兩個:
方案一:使用Hiragino Sans GB字體
目前它是MAC系統下自帶的比較好看的黑體字體之一,比較適合網頁設計渲染,也廣受歡迎。
比如QQ空間的字體設置為:
.os_mac {font-family: "ff-tisa-web-pro-1","ff-tisa-web-pro-2","Lucida Grande","Hiragino Sans GB","Hiragino Sans GB W3";}
前面三個字體為英文字體。
方案二:使用-webkit-font-smoothing:antialiased
當然這個只是webkit私有屬性,Firefox和Opera等流覽器不能使用——其實MAC版Firefox 的字體渲染比Webkit要好看一點兒。
總結
那麼,到底那種方案好一些呢?
如果你想偷懶,就只需要添加-webkit-font-smoothing:antialiased就可以了,最求最佳效果,就兩個都用上:P
如果你又更好的方案,歡迎提供。
轉貼來源:前端觀察 - 前端觀察專注於網站前端設計與前端開發
參考文獻:
1.戴軒廷、馬恆、張紹勳 (2004), 衡量網路廣告態度之指標建構, 台灣管理學刊, 4(1), 59-84.
2.李青蓉等編著.(1998).人機介面設計,台北縣:空大。
3.邱柏清.(2004).網頁介面愉悅行之研究,國立台灣科技大學設計研究所碩士論文。
相關文章
回應式網頁設計網頁設計要根據企業風格慎選配色為你的網頁設計開發後,並代管網站來增加收入虛擬主機的簡要說明介紹介紹在平面設計中的職業
最新文章
HVACKer:入侵隔離網絡的新型攻擊技術還有什麼不會被入侵?路由器 LED 燈已成為攻擊入口美 5 家獨角獸同天申請 IPO 掛牌,最狂的是一家估值 124 億美的數據分析新創!【台灣「智慧產業」開始佈局】緯創集團領投跨國 AI 新創 iKala,下一步拓展東南亞市場快可以用手機遠端遙控你的所有家電了