超赞！细聊iOS 9字体的变化与使用方法（附字体下载）

扫一扫
官方手机版

扫一扫
AI创作程序

扫一扫
木子公众号

扫一扫
AI公众号

转眼间 iOS 9已经发布一个多月了，而今苹果又更新了9.2系统。对于UI设计师来说，iOS 9的更新最为激动的是带来了全新设计的中文字体「苹方」以及英文字体「San Francisco」，今天@Ping 给同学们聊聊这次字体的变化以及字体的使用规则、应该注意的问题等，附上字体下载哟。

学习IOS 9不得不看的官方设计指南：《腾讯力作！超实用的IOS 9人机界面指南（1）：UI设计基础》

中文字体「苹方」

在iOS9 前的中文字体「黑体」被人诟病已久：喇叭口设计、仅包含2个字重，不仅在Retina的屏幕上不能达到很好的显示效果，并且随着iOS 7 开始的扁平化的设计语言，两个字重的「黑体」已经完全无法胜任设计的需求。就在去年，Google联合adobe发布了「思源黑体」作为Android的默认中文字体，新的「思源黑体」不仅仅在字形上更易于在屏幕的阅读，并且拥有7个字重，充分满足了设计的需求。终于，iOS 9带来了全新的「苹方」，字形更加「优美」，且在屏幕的显示也更加清晰易读，拥有6个字重，满足了日常的设计和阅读需求。

英文字体「San Francisco」

而英文方面，苹果加入了新的字体「San Francisco」[官方网站]，该字族包含了有两个字体：为 iOS 和 OS X 设计的 SF，以及为 Watch OS 设计的 SF Compact ，而各自分为各自分为Text 和 Display，其中前者 6 个字重，后者 9 个（多了三个斜体）。

SF Compact这个字体目前专门为 Watch OS 设计，该字体最明显的差异就是字碗（Bowl）的设计，Compact的更加平直，显的瘦长，手表的界面非常小，通过增加字体间间距可以提高字体的阅读性。

这个比较特别的是 SF 字体包含了两个，分别为：SF-UI-Display 和 SF-UI-Text ，他们的差异主要是字体间距的不同，Text 的字体间距较大，再小的字体中更加易读。

而苹果建议使用规则是：小于 19pt 使用 Text,大于19pt 使用 Display,当你在 APP里面使用了 SF 字体后系统会自动选择使用SF-UI-Display 还是 SF-UI-Text。

SF字体的另外一个特性是支持符号的整体居中，比如时间显示，之前的 Helvetica 的冒号是不居中的，但是新的字体调用其 API 可以实现居中。这样的特性有很多，感兴趣的朋友可以直接去官网查看[官方网站]。

字体使用规则与实际中注意的问题

中文字体使用（字体选择与字体调用名称）

如果安装了 Mac 最新的 El Capitan(10.11) 里面就已经包含了该字体，较老的苹果系统，或者 Windows 用户就需要自行下载了。简体中文字体的英文名称是「PingFangSC」, 其中有6个字重可供选择。现在很多的App都是内嵌 Html 5，那么在设计的时候如何选择字体的字重呢？在 Html 中我们选择Font-Weight 来设置字体的粗细，下图就是字体的粗细与Font-Weight数字相对应的关系：

老设计稿的调整

如果之前在设计App使用的「黑体-简」，它拥有两个字重：细体和中等，对应的可以调整为苹方的细体 和 常规体或中粗体，为什么有个「或」呢？其实「黑体-简」的中等字重是偏粗的，因为该字重是直接由「华文黑体」的中黑体拿来凑合使用的！

字体渲染问题

现在做 UI 界面设计主流都是使用 Photoshop 和 Sketch。在字体的选择以外，怎么样设计稿才能更加接近 iOS 系统真实的渲染效果呢？我们需要注意两点：渲染方式和字体大小选择。

1. PS中选择苹方字体，渲染方式选择「Mac」

2. Sketch因为使用的是 Mac 默认的渲染方式，所以不需要选择，但是对与中文却有问题，如下图（上），解决方案就是：打开Perferences → General 去掉 Font Rendering的勾选就正常了。

sketch渲染对比

sketch设置 (Sketch 3.41 已经将改设置改到第二个选项「Canvas」中)

英文字体使用

1. SF Compact 和 SF 字体区别，Watch OS 使用SF Compact

2. 不同字号时候字体选择，大于19pt 选择SF-UI-Display，小于19pt 选择SF-UI-Text

iOS 9 的新字体介绍就这些了，如有错误或者疑问，都可以告诉我。

附：字体下载（百度盘）

【IOS 9字体相关好文合集】

专业干货！解读英文字体的秘密！
《流言终结者！为你解读苹果SAN FRANCISCO字体的秘密》

说IOS 字体丑的同学建议看看：
《不开玩笑！一切吐槽IOS 9字体的行为都是耍流氓》

可能是设计师都向往的生活状态：
《优设访谈！腾讯高级交互设计师C7210的十年设计路》

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

【木子设计网 原创文章 投稿邮箱：13671295@qq.com】

================关于木子设计网================
"木子设计网uisdc.com"是国内人气最高的网页设计师学习平台，专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：https://www.muzisucai.com/。
设计微博：拥有粉丝量103万的人气微博@优秀网页设计 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：https://www.muzisucai.com/