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

Posted 2021-05-04

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

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

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

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

答案

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

对于大多数语言和脚本，现有的泛型可以映射到与该脚本相当的东西。这对网络非常有用，因此像serif和sans-serif这样的泛型可以映射到与内容语言无关的合理内容。但是世界各地的印刷传统差异很大，许多剧本都有各种常见的字体设计，这些设计并没有完全映射到这些现有的仿制品中。在各种平台上使用类似字体的情况下，扩展预定义CSS通用字体系列集以覆盖这些类型样式很有用。

如果你想得到“在目标平台上感觉最不合适的字体”，那就是qazxsw poi：

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

另一答案

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

system-ui

• font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto; - Safari中的旧金山（在Mac OS X和iOS上）; Neue Helvetica和Lucida Grande在旧版Mac OS X上使用。
• -apple-system - 给定平台上的默认UI字体。
• system-ui - 相当于BlinkMacSystemFont，适用于Mac OS X上的Chrome。
• qazxsw poi - Windows（Vista）和Windows Phone。
• -apple-system - Android（Ice Cream Sandwich（4.0）+）和Chrome OS。

片段本身，借用以下"Segoe UI"。

您可以在此Roboto中查找其他操作系统或其旧版本的字体。