如何指定系统默认的有衬线字体和无衬线字体？

Question

十多年前我学习CSS时，使用“默认字体”（无论其含义是什么）的标准（也是唯一的）方法是：

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

去年，苹果为其新系统字体添加了自定义语法（参考链接），如果我没记错，Blink也做了类似的事情。

能否有更熟悉CSS的人总结一下，当我只想使用默认的无衬线字体或衬线字体时，font-family属性应该如何书写？（我特别不想使用网络字体。）

- Stefan Majewsky

---

答案不就在你的问题里吗？相关问题似乎是关于所谓的“旧金山”字体不再暴露的。 - Oriol

@Oriol 你的意思是什么？链接的问题说我需要不同的语法才能在 Mac 上获取系统字体，我基本上想知道在其他平台上需要考虑哪些其他例外情况。 - Stefan Majewsky

当你说“默认字体”时，你是指给定平台上的默认UI字体吗？ - Oriol

基本上，更严格的定义是“在目标平台上感觉最不突兀的字体”。 - Stefan Majewsky

Answer 1

CSS字体模块4级草案引入了新的通用字体族。

对于大多数语言和脚本，现有的通用字体可以映射到与该脚本相当的内容。这对于Web很有用，因此像serif和sans-serif这样的通用字体可以独立于内容的语言映射到合理的内容。但是，印刷传统在世界范围内差异很大，许多脚本具有各种常见的字体设计，这些设计不能清晰地映射到这些现有的通用字体。在使用类似字体跨越各种平台的情况下，扩展预定义的CSS通用字体族集以涵盖这些字体样式非常有用。

如果您想获取“在目标平台上感觉最不突兀的字体”，那就是system-ui： system-ui 字体族表示给定平台上的默认UI字体。

- Oriol

---

好的，我会选择这个方案，并等待Safari进行更新。 - Stefan Majewsky

Answer 2

这里是一个CSS代码片段，可以在大多数平台（OSX、iOS、Windows、Windows Phone、Android）上默认使用系统字体：

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

• -apple-system — 在Mac OS X和iOS的Safari浏览器中使用San Francisco字体；在较早的Mac OS X版本中使用Neue Helvetica和Lucida Grande字体。
• system-ui — 给定平台上的默认UI字体。
• BlinkMacSystemFont — Chrome浏览器在Mac OS X上使用-apple-system字体的等效字体。
• "Segoe UI" — 适用于Windows（Vista +）和Windows Phone的字体。
• Roboto — 适用于Android（Ice Cream Sandwich（4.0 +））和Chrome OS的字体。

该代码片段来自以下github问题。

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

- user8554766