系统字体堆栈

使用操作系统的原生字体，以实现接近原生应用的效果。

• 使用 font-family 定义字体列表。
• 浏览器会依次查找每个字体，如果可能的话优先使用第一个字体，如果无法找到该字体（在系统或CSS中定义），则会回退到下一个字体。
• -apple-system 是 San Francisco 字体，在 iOS 和 macOS 上使用（但在 Chrome 上不适用）。
• BlinkMacSystemFont 是 San Francisco 字体，在 macOS Chrome 上使用。
• 'Segoe UI' 在 Windows 10 上使用。
• Roboto 在 Android 上使用。
• Oxygen-Sans 在带有 KDE 的 Linux 上使用。
• Ubuntu 在 Ubuntu（所有变种）上使用。
• Cantarell 在带有 GNOME Shell 的 Linux 上使用。
• 'Helvetica Neue' 和 Helvetica 在 macOS 10.10 及以下版本上使用。
• Arial 是所有操作系统广泛支持的字体。
• sans-serif 是如果没有其他字体支持时的回退无衬线字体。

<p class="system-font-stack">这段文字使用系统字体。</p>

.system-font-stack {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial,
    sans-serif;
}