轉(zhuǎn)眼間 iOS 9已經(jīng)發(fā)布一個(gè)多月了，而今蘋(píng)果又更新了9.2系統(tǒng)。對(duì)于UI設(shè)計(jì)師來(lái)說(shuō)，iOS 9的更新最為激動(dòng)的是帶來(lái)了全新設(shè)計(jì)的中文字體「蘋(píng)方」以及英文字體「San Francisco」，今天@Ping 給同學(xué)們聊聊這次字體的變化以及字體的使用規(guī)則、應(yīng)該注意的問(wèn)題等，附上字體下載喲。

學(xué)習(xí)IOS 9不得不看的官方設(shè)計(jì)指南：《騰訊力作！超實(shí)用的IOS 9人機(jī)界面指南（1）：UI設(shè)計(jì)基礎(chǔ)》

中文字體「蘋(píng)方」

在iOS9 前的中文字體「黑體」被人詬病已久：喇叭口設(shè)計(jì)、僅包含2個(gè)字重，不僅在Retina的屏幕上不能達(dá)到很好的顯示效果，并且隨著iOS 7 開(kāi)始的扁平化的設(shè)計(jì)語(yǔ)言，兩個(gè)字重的「黑體」已經(jīng)完全無(wú)法勝任設(shè)計(jì)的需求。就在去年，Google聯(lián)合Adobe發(fā)布了「思源黑體」作為Android的默認(rèn)中文字體，新的「思源黑體」不僅僅在字形上更易于在屏幕的閱讀，并且擁有7個(gè)字重，充分滿足了設(shè)計(jì)的需求。終于，iOS 9帶來(lái)了全新的「蘋(píng)方」，字形更加「優(yōu)美」，且在屏幕的顯示也更加清晰易讀，擁有6個(gè)字重，滿足了日常的設(shè)計(jì)和閱讀需求。

英文字體「San Francisco」

而英文方面，蘋(píng)果加入了新的字體「San Francisco」[官方網(wǎng)站]，該字族包含了有兩個(gè)字體：為 iOS 和 OS X 設(shè)計(jì)的 SF，以及為 Watch OS 設(shè)計(jì)的 SF Compact ，而各自分為各自分為T(mén)ext 和 Display，其中前者 6 個(gè)字重，后者 9 個(gè)（多了三個(gè)斜體）。

SF Compact這個(gè)字體目前專(zhuān)門(mén)為 Watch OS 設(shè)計(jì)，該字體最明顯的差異就是字碗（Bowl）的設(shè)計(jì)，Compact的更加平直，顯的瘦長(zhǎng)，手表的界面非常小，通過(guò)增加字體間間距可以提高字體的閱讀性。

這個(gè)比較特別的是 SF 字體包含了兩個(gè)，分別為：SF-UI-Display 和 SF-UI-Text ，他們的差異主要是字體間距的不同，Text 的字體間距較大，再小的字體中更加易讀。

而蘋(píng)果建議使用規(guī)則是：小于 19pt 使用 Text,大于19pt 使用 Display,當(dāng)你在 APP里面使用了 SF 字體后系統(tǒng)會(huì)自動(dòng)選擇使用SF-UI-Display 還是 SF-UI-Text。

SF字體的另外一個(gè)特性是支持符號(hào)的整體居中，比如時(shí)間顯示，之前的 Helvetica 的冒號(hào)是不居中的，但是新的字體調(diào)用其 API 可以實(shí)現(xiàn)居中。這樣的特性有很多，感興趣的朋友可以直接去官網(wǎng)查看[官方網(wǎng)站]。

字體使用規(guī)則與實(shí)際中注意的問(wèn)題

中文字體使用（字體選擇與字體調(diào)用名稱）

如果安裝了 Mac 最新的 El Capitan(10.11) 里面就已經(jīng)包含了該字體，較老的蘋(píng)果系統(tǒng)，或者 Windows 用戶就需要自行下載了。簡(jiǎn)體中文字體的英文名稱是「PingFangSC」, 其中有6個(gè)字重可供選擇?，F(xiàn)在很多的App都是內(nèi)嵌 Html 5，那么在設(shè)計(jì)的時(shí)候如何選擇字體的字重呢？在 Html 中我們選擇Font-Weight 來(lái)設(shè)置字體的粗細(xì)，下圖就是字體的粗細(xì)與Font-Weight數(shù)字相對(duì)應(yīng)的關(guān)系：

老設(shè)計(jì)稿的調(diào)整

如果之前在設(shè)計(jì)App使用的「黑體-簡(jiǎn)」，它擁有兩個(gè)字重：細(xì)體和中等，對(duì)應(yīng)的可以調(diào)整為蘋(píng)方的細(xì)體 和 常規(guī)體或中粗體，為什么有個(gè)「或」呢？其實(shí)「黑體-簡(jiǎn)」的中等字重是偏粗的，因?yàn)樵撟种厥侵苯佑伞溉A文黑體」的中黑體拿來(lái)湊合使用的！

字體渲染問(wèn)題

現(xiàn)在做 UI 界面設(shè)計(jì)主流都是使用 Photoshop 和 Sketch。在字體的選擇以外，怎么樣設(shè)計(jì)稿才能更加接近 iOS 系統(tǒng)真實(shí)的渲染效果呢？我們需要注意兩點(diǎn)：渲染方式和字體大小選擇。

1. PS中選擇蘋(píng)方字體，渲染方式選擇「Mac」

2. Sketch因?yàn)槭褂玫氖?Mac 默認(rèn)的渲染方式，所以不需要選擇，但是對(duì)與中文卻有問(wèn)題，如下圖（上），解決方案就是：打開(kāi)Perferences → General 去掉 Font Rendering的勾選就正常了。

sketch渲染對(duì)比

sketch設(shè)置 (Sketch 3.41 已經(jīng)將改設(shè)置改到第二個(gè)選項(xiàng)「Canvas」中)

英文字體使用

1. SF Compact 和 SF 字體區(qū)別，Watch OS 使用SF Compact

2. 不同字號(hào)時(shí)候字體選擇，大于19pt 選擇SF-UI-Display，小于19pt 選擇SF-UI-Text

iOS 9 的新字體介紹就這些了，如有錯(cuò)誤或者疑問(wèn)，都可以告訴我。

附：字體下載（百度盤(pán)）

【IOS 9字體相關(guān)好文合集】

專(zhuān)業(yè)干貨！解讀英文字體的秘密！
《流言終結(jié)者！為你解讀蘋(píng)果SAN FRANCISCO字體的秘密》

說(shuō)IOS 字體丑的同學(xué)建議看看：
《不開(kāi)玩笑！一切吐槽IOS 9字體的行為都是耍流氓》

可能是設(shè)計(jì)師都向往的生活狀態(tài)：
《優(yōu)設(shè)訪談！騰訊高級(jí)交互設(shè)計(jì)師C7210的十年設(shè)計(jì)路》

原文地址：zhuanlan.zhihu
作者：@Ping

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專(zhuān)注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書(shū)：史上最全的設(shè)計(jì)師圖書(shū)導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量103萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com