CSS 系统字体堆栈,使用操作系统的本机字体

使用操作系统的本机字体来接近本机应用程序感觉。

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;
}

说明

浏览器查找每个连续的字体，如果可能，则首选第一种字体，如果找不到该字体(在系统上或在CSS中定义)，则返回到下一种字体。

1. -apple-system 是旧金山，用于iOS和macOS（不是Chrome）
2. BlinkMacSystemFont 是旧金山，在macOS Chrome上使用
3. Segoe UI 在Windows 10上使用
4. Roboto 在安卓系统上使用
5. Oxygen-Sans 是在GNU + Linux上使用的
6. Ubuntu 是在Linux上使用的
7. "Helvetica Neue" 和Helvetica 在macOS 10.10及以下版本中使用(因为有空格，所以用引号括起来)
8. Arial 是所有操作系统都广泛支持的字体
9. sans-serif 如果不支持任何其他字体，则为备用无衬线字体