在 CSS 中定义系统字体栈
使用字体栈是指在 CSS 规则的 font-family 属性中定义字体列表的做法。浏览器会按顺序查找每个字体,如果可能的话首选第一个字体,如果找不到字体(在系统上或在 CSS 中定义),则回退到下一个字体。
系统字体栈是一个字体列表,用于接近原生应用的感觉。它使用操作系统的原生字体来渲染文本,这是让你的 Web 应用感觉更原生的好方法。
使用 system-ui
system-ui 是最近引入的通用字体族,它使用系统的默认 UI 字体。它是在所有操作系统上获得原生感觉的好方法,而且它的浏览器支持相当出色。使用 system-ui 加上 sans-serif 作为后备是定义系统字体栈的推荐方式。
.system-font-stack {font-family: system-ui, sans-serif;
}💬 注意 严格来说,
system-ui仍处于工作草案状态,尚未成为标准。然而,它已经被所有主流浏览器支持,看起来不会有什么变化。
使用自定义系统字体栈
如果你想支持旧浏览器或不愿使用 system-ui,你可以简单地构建自己的系统字体栈。为此,你必须包括所有主要操作系统的系统字体,以及一个后备字体。以下是最常见的系统字体的快速概述:
-apple-system是 San Francisco,用于 iOS 和 macOS(但不是 Chrome)。
