24.在 CSS 中定义系统字体栈 & 全屏

在 CSS 中定义系统字体栈

使用字体栈是指在 CSS 规则的 font-family 属性中定义字体列表的做法。浏览器会按顺序查找每个字体,如果可能的话首选第一个字体,如果找不到字体(在系统上或在 CSS 中定义),则回退到下一个字体。

系统字体栈是一个字体列表,用于接近原生应用的感觉。它使用操作系统的原生字体来渲染文本,这是让你的 Web 应用感觉更原生的好方法。

使用 system-ui

system-ui 是最近引入的通用字体族,它使用系统的默认 UI 字体。它是在所有操作系统上获得原生感觉的好方法,而且它的浏览器支持相当出色。使用 system-ui 加上 sans-serif 作为后备是定义系统字体栈的推荐方式。

.system-font-stack {
   
  font-family: system-ui, sans-serif;
}

💬 注意 严格来说,system-ui 仍处于工作草