CSS SNIPPET

  返回

使用系统原生字体  视觉效果

使用操作系统的原生字体获得接近原生app的体验。

HTML
<p class="system-font-stack">This text uses the system font.</p>
CSS
.system-font-stack {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu,
    Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
效果演示

This text uses the system font.

代码说明
  • 浏览器查找字体,优先选择第一个,找不到第一个就降级为下一个。
  • -apple-system 是San Francisco, 应用于iOS 和macOS (但是不是Chrome)
  • BlinkMacSystemFont 是 San Francisco, 应用于 macOS Chrome
  • Segoe UI 应用于Windows 10
  • Roboto 应用于 Android
  • Oxygen-Sans 应用于 Linux with KDE
  • Ubuntu 应用于 Ubuntu (各种变体)
  • Cantarell 应用于Linux with GNOME Shell
  • "Helvetica Neue"Helvetica 应用于macOS 10.10 及以下(用引号是因为有空格)
  • Arial 是所有操作系统都支持的字体
  • sans-serif 是降级选择,当任何其他字体都不支持时,使用sans-serif
浏览器支持

100.0%