恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
新字体San Francisco【附带下载】
0.0°
2016-08-26 原创文章 经验/观点 举报 93881 239 358 39

巴啦巴拉巴拉~~这个问题其实困扰蛮久了,虽然说一直还在比较保守的用Helvetic Neue。但觉得有必要解决一下这个问题~

=====================================================

Image title

我们打开近几个版本的sketch的模版新建“IOS UI Design”会出现缺字体的提示。而却少的字体正式Apple在新系统中用到的San Francisco字体,这有点让我摸不着头脑...

我得打开字体册看看有没有它说的这个字体呢?

Image title

我们并没能找到与San Francisco相关的字体。(好吧,截图里看到的这个San Francisco Text是我之前安装上去的,别理他就是了-_-#)

回到sketch中打开的模版文件,我们发现模版默认被替换的字体变成了命名为 .AppleSystemUIFont 的字体。而这个字体在字体册及其他软件甚至当我们不打开这个模版时都无法找到的一个字体。

仔细看下不难理解,这命名不就是在说“我是系统用字体”的意思嘛~

同时还多出来一个 .PingFang SC字体,显然这就是对应苹方字体咯

Image title

我把这个 .AppleSystemUIFont 与iOS9.2自带键盘的字体做比较


Image title


字型基本相同


Image title


我将模版内的键盘与截图键盘相叠加,模版内字体颜色调成了橙色。结果两者基本相叠加,证实了两者是相同字体。

更新IE Capitan系统之后可以发现系统多了苹方字体,但并没有与之对应的西文字体San Francisco 可以使用。但系统本身使用的却又是 San Francisco 字体。

简单来说,OS X把部分字体名称用西文句点 . 开头来隐藏这些字体并用作系统私用字体,因此我们无法主动在软件中查询到这些字体。

但出于某种bug,在sketch中当缺损字体为San Francisco时,系统会把这个隐藏字体“贡献”出来,而不是匹配其他字体(我安装了很多款 San Francisco 的测试版字体做测试,都未起作用)。这也好理解,本身它们就是一个字体嘛,并不存在其他字体比它们的匹配度更高的情况。

Image title

同时我发现一个有意思的现象:

上面我们提到了与之匹配的还产生了一个 .PingFang SC。我们把它与普通的PingFang SC相比较发现,两者唯一的差别就是行高

之前有朋友问过我说在sketch中如何解决文字上下边距到边框边距测不准的情况?我那时候给他的答案是就这样啊~没办法,不过我想现在你用这款字体应该是能顺利解决这个问题了~

在AI中,我找到了这款被命名为 System Font Regular 的 San Francisco 字体。单它只提供了Regular这一个字重,但却提供了两种字款~(莫名其妙~)

Image title

Image title




遗憾的是在PS中我就找不到一点痕迹了~ 

=================================================

好吧,罗嗦了一大堆,其实想说的只有一句:

要用新的字体,你得自个儿下。Apple虽然提供我们在系统上使用该字体,但没授权我们在其他地方使用(也是拗口~)。

如果你试图在网上寻找该款字体,那么这个网站应该不陌生https://developer.apple.com/fonts/,这是苹果官网提供下载该字体的入口。不过可惜的是它TMD只对开发者开放下载~

不过好在我是找到了这款字体的(不然也不来这唧唧歪歪了~)

不过我还得啰嗦几句~

用这款字体,自然得了解点背后的知识点~

Image title


San Francisco字族包含了有两个字体:SF和SF Compact,各自又分为Text和Display,Text包含6个字重及对应的斜体,Display包含9个自重(两个细体和一个粗体)。SF用于OS X和iOS系统,而SF Compact用于Watch OS。

而其中Text和Display从字面意思就不难理解:前者适合作为正文展示,后者适合座位标题使用。两者的区别主要在字间距上。

SF Compact与SF最大的区别是前者为了适应手表小屏幕的展示效果缩小了字碗增大了字体间距。

巴拉巴拉~~,其他乱七八糟的就自己去百度Google吧~

啰里八嗦:

其实这片文章无非是给还没用上San Francisco字体的朋友提供下资源。我大可贴个链接解决问题的,但我觉得最有意义的是在于我在寻找答案的过程中得到的我意料之外的知识~,并把这一切分享出来,让大家也知道这些有用的知识

参考资料:

如何评价 Apple Watch 中的无衬线字体 San Francisco?

如果 San Francisco 字体作为 iOS 和 OS X 的系统默认显示字体,会比 Helvetica Neue 表现得更出色吗?

为什么 Font Book.app 中看不到 San Francisco?

更新:2016-08-26

下载
收藏

239人已收藏

阿喵_Shiloh_Miao

界面/交互/平面 设计师 个人网站-maouys.com

  • 19

    作品

  • 537

    粉丝

  • 22

    关注

  • 作为UI/UE的你,知道这些关于iPhone X的知识点吗?
  • 每个人都该有个一个自己专属的头像~
  • 网页设计中基础布局
  • PhotoShop 自CC以后新添加的那些好用的功能们
相关标签
GUI

    猜你喜欢

      2016-08-26 原创文章 经验/观点 举报 93881 239 358 39

      新字体San Francisco【附带下载】

      0.0°

      你确定要举报新字体San Francisco【附带下载】

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2016年01月08日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      358
      239
      39

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录