歡迎光臨一流素材網,免積分免費素材下載!

MAC /WIN 網頁字體顯示方案

所屬欄目:DIV+CSS技巧更新時間:2014-11-17來源:作者:deepdfhy瀏覽:0

20120825

Mac在誕生的時候就把對字體處理盡可能接近原貌成為它很大的一個賣點,而在這些年親身使用后,個人感覺Mac下的字體確實看起來比Win下舒服些,特別是在瀏覽網頁時,字體比較“珠圓玉潤”,可惜的是Mac目前并不是主流,大多數還是Win用戶。所以即使你所使用是Mac,在設計仍然要記得平衡Win下的效果。

Mac和Win的顯示區別

截了段文字做了個對比,很容易看得出來,字體顯示起來是有很大的差別的。


Mac下文字是渲染過,比較飽滿,Win下更像素化些,看起來很清晰。具體什么因素造成了這個差別,已經有不少的討論了。

Joel Spolsky「Font smoothing, anti-aliasing, and sub-pixel rendering」總結了各自的區別。

蘋果認為,字體渲染算法的目標應盡可能還原字體的設計,即使代價是造成些許模糊。

微軟認為,字符的形狀應和像素契合,以防止模糊,提高可讀性,即便扭曲了字體的構造。

Typekkit 「Type rendering: operating systems 」也總結了一段

Mac OS X users see Core Text, Windows 7 and Windows Vista users see either DirectWrite or GDI, and Windows XP users see GDI. For now,

還有更多,我就不摘過來了,大家可自行搜索。

默認字體&CSS字體設置

字體的差異不僅是渲染的效果,其實Mac和Win的默認字體也是不一樣的,Mac是“華文黑體(Heiti SC Light 和 Heiti SC Medium)”,Win是“宋體(Simsun)”,所以在頁面沒設置默認字體的情況下,同個頁面在2個系統同時展示的中文字體也是不一樣。(字體效果可以見剛才的2個系統字體對比圖)。

有種特殊的情況,即使命名了默認中文字體Mac也會使用系統默認字體,不知這算不算是一個Bug,情況如下:

font-family:”宋體” Mac下無法認出宋體,Win可以認出

font-family:”simsun” Mac和Win都可以認出宋體

在使用中文命名時,還可能會遇上CSS編碼導致發生亂碼的問題:

綜合發生的情況,建議在設置字體時都使用英文描述,這些是從網上找了相關中英文字體的命名:

宋體: SimSun

黑體: SimHei

華文細黑: STHeiti Light [STXihei]

華文黑體: STHeiti

微軟雅黑: Microsoft YaHei

微軟正黑體: Microsoft JhengHei

新宋體: NSimSun

新細明體: PMingLiU

仿宋: FangSong

楷體: KaiTi

更多中文字體的英文名稱的文檔

暫定的解決方案

在設計時候如何能夠平衡Mac和Win的設計差別? Win下面可以在PS中使用“宋體無渲染”完全還原默認系統的文字效果,但Mac下可能系統的文字渲染和PS中的文字渲染算法不一樣,總是有點差別,沒辦法完全的還原。


所以在考慮到網站的用戶是以Win為主,PS中又能夠完全的還原Win下文字的顯示效果,同時之前的一段中發現在Win下面有不錯效果在Mac下也會有不錯的表現之后,有了一個暫定的方案:

統一使用“宋體無渲染”為默認文字,先保證在Win系統下的顯示效果

在CSS中不訂下默認字體,根據系統格式調整

在網頁上線后在Mac下再進行一次復查,保證Mac下的顯示效果


收藏 0 有幫助 0 沒幫助 0 打賞 0
相關教程
給個評價吧
贵州11选5开奖直播 澳洲快乐8开奖顺序 四川快乐12中奖口诀 2018股票分析报告范文 河南481走势图今天 江西多乐彩11选五走势图一定牛 天津11选5走势图基本 湖北快三走势图为什么出不来 app河北十一选五走势图电脑版 棋牌开发公司的套路 甘肃11选5任二三码中奖