如何指定系统的默认serif和sans-serif字体系列？

Question

十多年前我学习CSS时，使用“默认字体”（无论这意味着什么）的标准（且唯一）方式是：

font-family: serif;
font-family: sans-serif;

然后，去年，Apple添加了custom syntax for their new system font，如果我没记错的话，Blink会做类似的事情。

当我只想要默认的sans-serif或serif字体时，那些与CSS更新的人可以总结一下我的font-family属性应该是什么样的吗？ （我特别不想要webfonts。）

Answer 1

CSS Fonts Module Level 4草案介绍了new generic font families

  

对于大多数语言和脚本，可以映射现有的泛型   与该剧本相当的东西。这对网络很有用   像serif和sans-serif这样的泛型映射到合理的东西   独立于内容的语言。但印刷传统   在世界各地广泛存在，许多脚本有各种各样的共同点   字体设计没有完全映射到这些现有的泛型。   在类似字体被广泛使用的情况下   对于平台，扩展预定义CSS泛型集是很有用的   字体系列以涵盖这些类型样式。

如果你想获得“目标平台上感觉最不合适的字体”，那就是system-ui：

  

system-ui字体系列表示a上的默认UI字体   给定平台

Answer 2

这是一个默认为系统字体的css片段，在大多数平台上（OSX，iOS，Windows，Windows Phone，Android）：

font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto;

• -apple-system - Safari中的旧金山（在Mac OS X和iOS上）; Neue Helvetica和Lucida Grande在旧版Mac OS X上使用。
• system-ui - 给定平台上的默认UI字体。
• BlinkMacSystemFont - 相当于-apple-system，适用于Mac OS X上的Chrome。
• "Segoe UI" - Windows（Vista +）和Windows Phone。
• Roboto - Android（冰淇淋三明治（4.0）+）和Chrome操作系统。

Snippet本身，借鉴了以下issue on github。

您可以在此article on css-tricks中查找其他操作系统或其旧版本的字体。