系统字体堆栈
使用操作系统的原生字体,以实现接近原生应用的效果。
- 使用
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;
}