CSS 网页字体最佳实践

一般在网页的字体设置中，可以将字体分类三类：

• 系统字体：使用系统自带的字体
• 兜底字体：当系统字体无法正常使用，而兜底的字体
• Emoji 字体：显示网页中的表情字体

为了满足不同平台，以及 Emoji 更好的显示效果（不会被前面的系统字体或兜底字体覆盖），建议使用下面代码配置网页字体。

最佳实践

@font-face {
  font-family: Emoji;
  src: local("Apple Color Emojiji"), local("Segoe UI Emoji"), local("Segoe UI Symbol"), local("Noto Color Emoji");
  unicode-range: U+1F000-1F644, U+203C-3299;
}
body {
  font-family: system-ui, —apple-system, Segoe UI, Rototo, Emoji, Helvetica, Arial, sans-serif;
}

衬线字体

.font-serif {
  font-family: Georgia, Cambria, "Times New Roman", Times, serif;
}

等宽字体

.font-mono {
  font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

解释说明

​
system-ui 是 CSS Fonts Module Level 4 – Generic font families 新增的关键字，兼容不同平台版本浏览器。

考虑到不同平台及向后兼容，在 macOS 和 iOS 上，我们需要使用 -apple-system。

参考链接

1. https://www.bilibili.com/video/BV1b54y1Z7pu
2. CSS 网页字体最佳实践