• 相關文章
  • 文字效果
  • 調色教學
  • 合成教學
  • 去背教學
  • 照片後製
  • 電腦繪圖
  • 設計教學
  • 動畫教學
  • 簽名製作
  • 其他教學
  • Illustrator
  • CorelDraw教學
  • 攝影教學
  • 3DMAX教學
  • AUTOCAD教學
  • MAYA教學
  • FireWorks教學
  • flash教學
  • 繪畫教學
  • PS作品欣賞
  • 包裝設計範例
  • LOGO設計範例
  • 封面設計範例
  • 名片設計範例
  • CG繪圖設計
  • 海報設計
  • 網頁設計範例
  • PS筆刷下載
  • PS濾鏡下載
  • PS動作下載
  • PS背景下載
  • PS樣式下載




  • 【 設計理論】詳細解析跨平台字體效果使用淺析




    詳細解析跨平台字體效果使用淺析



    這一次的教學是屬於設計理論領域中的設計理論的相關教學。

    文章出處是來自優設的設計理論類文章,寫教學的作者是情非得已,感謝情非得已提供設計理論的實作教學。

    教學大綱:

    例如對一些大號文字還原后,實際視覺效果有遜於在photoshop上的效果;在Mac上的設計稿還原后,明明用的還是“宋體”和“黑體”,但是還原后字型相距較大;而在Windows做好的網頁在Mac上看起來字體也有點異樣。


    設計理論教學開始

    在對設計稿視覺還原的過程中,經常會產生一些字體還原的問題。

    例如對一些大號文字還原后,實際視覺效果有遜於在photoshop上的效果;在Mac上的設計稿還原后,明明用的還是“宋體”和“黑體”,但是還原后字型相距較大;而在Windows做好的網頁在Mac上看起來字體也有點異樣。

    這篇文章主要對字體作了一些探討,主要內容分為兩部分:

    一、字體可用性分析

    二、字體實際展示效果分析

    結論

    由於文章較長,結論先行:

    1. Mac & Windows公有可用英文及數字字體有:Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact Times New Roman, Trebuchet MS,

    Verdana

    Windows下可用中文字體有(中易)宋體,新宋體,仿宋體,黑體,楷體,微軟雅黑(部分系統適用)。

    Mac下可用中文字體有(華文)宋體,仿宋體,華文黑體,華文細黑,華文楷體。

    在Mac下網頁的字體設置,參考了Apple官網的做法,可使用華文黑體,保持與Mac本身系統字體的一致性。

    2. 對於微軟雅黑,以操作系統計算,覆蓋率僅為不到30%,未安裝該字體的用戶可使用宋體或黑體替代,有必要的話可考慮指定替代字體。

    3. 在Mac中,未針對Mac做Mac字體設置的話,網頁字體會按一定規則轉成Mac下的字體。

    4. 正文12px字體建議使用宋體。12-17px宋體比微軟雅黑要清晰。

    一、字體可用性分析

    A. 中文字體:

    值得注意的是,mac下以及windows下沒有公用的中文字體(相關詳細對比後續討論)

    具體預裝簡體中文字體列表如下:

    詳細解析跨平台字體效果使用淺析

    【關於微軟雅黑的覆蓋率】

    據統計,近期win7+vista的市場份額之和約在25%左右浮動,此部分用戶內置微軟雅黑,而對於沒有主動安裝微軟雅黑的XP-的用戶,在頁面中使用微軟雅黑時,文字將使用宋體替代。

    B. 英文字體:

    據統計(http://media.24ways.org/2007/17/fontmatrix.html),mac以及windows通用的公有字體有:

    詳細解析跨平台字體效果使用淺析

    當頁面使用到活字的時候,可聯繫設計師盡量使用以上中英文字體。使用這些字體可避免使用圖片,降低用戶加載時的帶寬成本,提升頁面的加載速度。

    二、字體實際展示效果分析

    A. Photoshop設計效果 vs Web實際展示效果

    詳細解析跨平台字體效果使用淺析

    微軟提供了名為Cleartype的字體平滑技術,但是在XP下,cleartype是默認關閉的。所以在vista以及vista以上系統中,相比於XP,字體渲染更平滑。而Mac Os X中,字體渲染更為飽滿,邊緣更模糊,視覺上會顯得更“粗”一些。

    總體來說:

    “Mac OS X 的字體渲染強調忠實字體設計,最大化保留字體的外形。邊緣平滑是為了更好地傳遞字體設計中的曲線等細節,而在這種方針下,有可能引起小字號時的模糊。

    而 Windows 的字體渲染強調文字的銳利和清晰。在操作系統介面和網頁正文等小字號的地方比較清晰,但大幅犧牲字體的原貌。“

    ——節選自http://www.zhihu.com/question/19573048

    如希望獲得更多關於字體渲染的信息,可閱覽http://blog.typekit.com/2010/10/15/type-rendering-operating-systems/

    B. 在Mac中,字體的差異性

    在Mac中,字體的差異性主要體現在中文上。

    基於Mac的設計稿——Windows並不能重現Mac下的字體效果

    一些設計師可能會使用Mac進行設計,但是會發現Mac設計出來的頁面在還原之後,字體的視覺差異較大,

    這是因為Mac下的宋體以及Windows下的宋體,Mac下的黑體以及Windows下的黑體是不同的。

    Windows系統下,其“宋體”=“中易宋體”,“黑體”=“中易黑體”

    Mac系統下,其“宋體”=“華文宋體”,而“黑體”=“華文黑體”,而實際華文黑體的非加粗,加粗分別來自原有的“華文細黑”和“華文黑體”。

    具體對比如下:

    詳細解析跨平台字體效果使用淺析

    所以,在Mac下設計時,請注意Windows下字體效果與Mac下的字體效果是不同的,隨之,把設計還原成網頁后,字體效果自然會和設計稿有一定差距。

    用Mac訪問針於Windows的網頁——Mac將使用自己的字體替代

    在頁面還原中,可以手動設置網頁在Mac下使用某種Mac平台下的字體,若不設置的話,將使用瀏覽器偏好設置中的默認字體,

    Mac下的Safari默認使用華文宋體,Chrome默認使用華文黑體。如下圖所示:

    詳細解析跨平台字體效果使用淺析

    在 Web 上的字體,如果設置了英文字體,將會影響到對應的中文默認字體。

    如果默認字體是非襯線字體例如 Arial, Verdana, Trebuchet, Impact,中文字體自動是選用非襯線字體華文黑體。(使用Impact的時候會加粗)

    如果默認字體是襯線字體例如 Georgia, Times New Roman,那麼中文字體就會自動選成襯線字體華文宋體。

    一般mac上會按這個規則選擇字體,但是經過測試,特殊的是,

    Courier New=>華文黑體

    Comic Sans MS=>華文楷體

    詳細解析跨平台字體效果使用淺析

    具體顯示邏輯如下:

    詳細解析跨平台字體效果使用淺析

    對於不同的瀏覽器,在Mac中實際展示效果如下,

    詳細解析跨平台字體效果使用淺析

    在實測我們可以發現,在Chrome下華文宋體並不能正常加粗。

    C. 關於使用13px、15px、17px的宋體

    Windows 自帶的點陣宋體(中易宋體)從 Vista 開始只提供 12、14、16 px 這三個大小的點陣,而 13、15、17 px 時用的是小一號的點陣(即每個字占的空間大了 1 px,但點陣沒變) 。

    詳細解析跨平台字體效果使用淺析

    對於13、15、17px的宋體,其大小與其小一號一樣,只是間距多了1px。

    所以在Photoshop中所使用的13、15、17px宋體並不能在web上正常還原,設計時應避免使用13、15、17px的宋體。

    D. 具體字體展示效果一覽

    中文篇:

    詳細解析跨平台字體效果使用淺析

    測試字號:12、13、14、16、18、24、30、36px

    其中可看到,

    1. 黑體字的鋸齒比較嚴重,

    2. 在字號較小時,仿宋體以及楷體在不加粗的情況下效果較差。

    3. 小字體中,宋體比微軟雅黑要清晰,

    (因為宋體在12-17px的時候使用的是點陣表示,小於12px及大於17px之後將由字體輪廓柵格化。

    即,12-17px顯示【點陣】,小於12px及大於17px顯示【輪廓】

    而微軟雅黑只提供【輪廓】,在字體較小的時候會顯得不清晰,所以對於正文建議使用宋體。)

    英文篇:

    詳細解析跨平台字體效果使用淺析

    根據以上圖標可以看出不同字體在不同字號不同粗細下的展示效果。

    如有需要請對比實際效果使用。

    結語

    在網頁構建中,字體可能是很容易被忽略的一個點。在設計的時候,很自然會認為在photoshop中選了某個字體,在web中選擇對應的字體,就會有對應的效果。

    但是實際往往會產生一定的差異性,尤其是在跨平台的情況下,差異性更加明顯。

    這樣的現象會導致視覺還原的結果與預期不同。引起往返修改,甚至產生遠低於預期的情況。

    所以為了更好地保證實際產品的視覺質量,字體也是一個不可忽略的切入點。———————————————————————————————————————————

    參考資料:

    http://www.zhihu.com/question/19573048 Mac 上的字體渲染和 Windows 的有什麼區別

    http://www.zhihu.com/question/20440679現在網頁設計中的為什麼少有人用 11px、13px、15px 等奇數的字體

    http://techsingular.net/?p=164 Mac OS X的字體

    http://ucdchina.com/snap/12274 Mac Win網頁字體顯示方案

    http://www.pjhome.net/article/Web/mac_os_fonts.htm關於MacOS下字體的一些研究

    http://dancewithnet.com/2009/11/22/default-web-font-style/ 默認Web字體樣式

    Chinese Standard Web Fonts: A Guide to CSS Font Family Declarations for Web Design in Simplified Chinese

    — —


    文章永久連結為: 詳細解析跨平台字體效果使用淺析