系统字体堆栈

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

  • 使用 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;
}