解释 system-ui, -apple-system

详情解释一下css中的system-ui, -apple-system使用

system-ui和-apple-system都是在CSS中使用的字体系列名称。

  1. system-ui：这是一种通用的：
    • 在 Windows 下，将采用Segoe UI字体
    • 在 macOS 和 iOS 下，将采用San Francisco字体
    • 在 Android 和 Chrome OS 下，将采用Roboto字体
    • 在 Ubuntu 下，将采用Ubuntu字体

在其他操作系统和浏览器中，可能会有所不同，但原理是一样的：它们都会尝试使用该系统的默认用户界面字体。

  1. -apple-system：这是 MacOS 和 iOS 系统的通用字体，主要用于 Safari 浏览器。在iOS和MacOS系统中，会使用San Francisco字体；在较早的MacOS版本中，则会使用Helvetica Neue字体。

因此，system-ui 和 -apple-system 主要作用是让开发者能够轻松地在不同的系统中使用系统默认的用户界面字体，从而保持界面的一致性和用户的使用习惯。