译者：骄阳
几个月前，我写了篇关于如何在浏览器里使用内置关键词与font缩写属性使用系统字体的文章 (see Using System Fonts in the Browser) 。这些关键词很有用，但它们也一些缺点，其中主要的一点就是它们仅使用缩写的font属性。这意味着我们不能在一个字体族的回退或其本身回退的列表里使用它。
最近，一些网站和web应用程序都采用一种新方法在浏览器中使用系统字体。通过这种方法，不同系统使用的字体明确地说它们属于font-family了。
字体栈
目前，在系统字体栈里还没有一个通用的字体序列栈。然而，不同网站使用的字体，即使不完全相同，也有所重复。下面是已经被用过的各字体，以及它们的目标设备（和浏览器）-
Font
Device Targeted
-apple-system (San Francisco)
iOS Safari, macOS Safari, macOS Firefox
BlinkMacSystemFont (San Francisco)
macOS Chrome
Segoe UI
Windows
Roboto
Android, Chrome OS
Oxygen / Oxygen-Sans
KDE
Fira Sans
Firefox OS
Droid Sans
Older versions of Android
Ubuntu
Ubuntu
Cantarell
GNOME
Helvetica Neue
macOS 版本的公共服务公告：
Your website doesn't need to look the same everywhere. It just needs to work everywhere.
— murmurs (@mrmrs_) September 13, 2016
它的缺点是什么？
使用这种方法也有一些缺点要考虑。
命名冲突
除-apple-system和BlinkMacSystemFont，我们所做的是调用字体的实际名称。这意味着，如果用户在机器上安装了与系统字体名称相同新的字体，那么会替换其使用。这是 what happened to Medium，去年他们首次推出了这种方法。
维护
作为各种操作系统更改所使用的系统字体，此字体列表将必须进行维护和更新。希望更多操作系统朝着苹果系统的针对最新设备字体有通用名称的方法改进。 但在此之前，列表需要定期迭代。
使用这个字体堆栈
如果你想使用这个字体栈，你所使用的字体将依赖于你的用户。就我个人而言，我认为Wordpress方法是最适合广大用户的，且 被他们团队进行了广泛的测试.
body {
font-family: -apple-system,
BlinkMacSystemFont,
""Segoe UI"",
Roboto,
Oxygen-Sans,
Ubuntu,
Cantarell,
""Helvetica Neue"",
sans-serif;
}
无论选择哪些方法，请务必在特定网站重要的不同浏览器（和版本）上进行测试。