Apple 打算在 iOS 和 OS X 中使用了一款新的很好看的字体 San Francisco。我第一次看见它是在我的 Apple Watch 中，马上这个字体就可以在所有的 Apple 设备中看见。
作为一个开发者，我们经常会遇到需要在网页中使用系统字体的情况。这些网页可能会被嵌入到我们的应用和一些文档中。在这些环境下，网页需要匹配这些嵌入环境的字体对用户体验是十分重要的。想象一下，如果在 Yosemite 中跑的一个应用，它显示 Sparkle 在 Lucida Grande 的感觉。（这个地方我清楚这些名词，不过意思就是网页嵌入到了一个应用中，然后应用的字体和网页的字体不匹配的感觉）。
我们马上就会面对许许多多的内容需要用 San Francisco 字体显示，因此需要通过 CSS 来指定相同的字体。不过实际上，这不是简单的事情。
传统上，我们会去明确地指定字体。比如像这样就可以使用 San Francisco 字体：
body {
font-family: "San Francisco", "Helvetica Neue", "Lucida Grande";
}
不幸运的是，最新的 OS X 10.11 中，并没有 San Francisco 字体。
但是这是系统字体啊，怎么可能找不到？
Apple 其实有个抽象系统字体的想法：不公开暴露系统字体的名字。他们也已经表示，任何私有的字体名字都可能被更改。这些私有的字体名已经被使用了一段时间：San Francisco 的超轻字体叫“.SFNSDisplay-Ultralight”。为了确定这个名字，你需要通过“NSFont”或者"UIFont"返回的实例中去仔细寻找。这显然不是一件简单的事。
Apple 打算在 iOS 和 OS X 中使用了一款新的很好看的字体 San Francisco。我第一次看见它是在我的 Apple Watch 中，马上这个字体就可以在所有的 Apple 设备中看见。
作为一个开发者，我们经常会遇到需要在网页中使用系统字体的情况。这些网页可能会被嵌入到我们的应用和一些文档中。在这些环境下，网页需要匹配这些嵌入环境的字体对用户体验是十分重要的。想象一下，如果在 Yosemite 中跑的一个应用，它显示 Sparkle 在 Lucida Grande 的感觉。（这个地方我清楚这些名词，不过意思就是网页嵌入到了一个应用中，然后应用的字体和网页的字体不匹配的感觉）。
我们马上就会面对许许多多的内容需要用 San Francisco 字体显示，因此需要通过 CSS 来指定相同的字体。不过实际上，这不是简单的事情。
传统上，我们会去明确地指定字体。比如像这样就可以使用 San Francisco 字体：
不幸运的是，最新的 OS X 10.11 中，并没有 San Francisco 字体。
但是这是系统字体啊，怎么可能找不到？
Apple 其实有个抽象系统字体的想法：不公开暴露系统字体的名字。他们也已经表示，任何私有的字体名字都可能被更改。这些私有的字体名已经被使用了一段时间：San Francisco 的超轻字体叫“.SFNSDisplay-Ultralight”。为了确定这个名字，你需要通过“NSFont”或者"UIFont"返回的实例中去仔细寻找。这显然不是一件简单的事。
抽象系统字体的动机是让操作系统在面对给定规则权重的时候可以做出更好的选择。Apple 还有研究其他的字体相关的新特性，比如“6”和“9”的仔细和一些不等宽的数字字体。我猜他们还会将这些特性带到网页上去。
由于抽象字体的原因，现在出现了一个新的通用的字体名：
apple-system。这个语法类似于这样：不幸的是，相关的官方文档简直太破了，大多数相关的信息，我都是从Webkit 源码中找到的，看上去仍然在开发中。
另一个让人失望的是，通用的字体名只能在 Safari 中工作。当然你不要希望 Google 会去提供“-apple”前缀，但是 Webkit 的源代码中有
-webkit-system-font。由于最新的 Chrome 是基于 Webkit 的，因此它也不好意外的忽略了 Blink。在 iOS 上的 Safari 增加了动态匹配自动字体的特性。这增加了一定的混乱。一下的关键字可以在 iOS 7+ 使用：
由于 OS X 没有办法去处理动态字体类型，上面这些关键字在桌面的 Safari 上就没有用了，当然，Chrome也不会支持，别想了。
另外请注意，这些关键字不会在你的
font-family中起作用，他们只会在font的定义中起作用。如果你想知道该功能更多的信息，可以阅读这篇教程如果你是一个 Apple 设备的开发者或者设计师，可能已经手动安装了 San Francisco 字体。不要像我这么傻：大多数访问你网页的用户可能并没有这个字体。同时 San Francisco 是需要被许可才能使用的，所以它也不会提供 Web font。
所以，我们码农应该怎么做呢？
如果你能确定你的内容只会在 Apple 设备的浏览器或者 Webview 中呈现的话，那语法将会是极其简单：
这样，你将会得到最新的系统字体或者退化成“Helvetica Neue”、“Lucida Grande”或者更老的系统字体。
现在，Chrome 支持
BlinkMacSystemFont字体，所以私有字体名称将不再需要。“system”这个通用字体名现在还不存在，但我鼓励浏览器去支持这个关键字。对于码农在全平台的开发将会有很大的帮助。在 Android 上，可以按需选择 Roboto 和 Noto。在 Windows 这样的，可以选择系统字体的操作系统上，可以更简单的选择适合内容环境的字体。
在文章的最后，我还想给出一个关于本篇文字的一个研究例子。你可以在 Apple 设备上的不同浏览器打开看下。
原文地址：http://furbo.org/2015/07/09/i-left-my-system-fonts-in-san-francisco/