CSS 中 ui-sans-serif、sans-serif 和 system-ui 通用字体名称之间的区别？

问题描述

CSS 中 font-family 中的 ui-sans-serif 和 sans-serif 字体有什么区别？和 ui-serif vs. serif？ ui-monospace vs. monospace？

system-ui 在哪里适合这个？你会为所有 3 种字体使用它吗？它会在字体列表中的哪个位置？

我通常看到“ui-”变体在 CSS 的 font-family 字体列表中排在最前面，另一个排在最后。类似 font-family: ui-sans-serif,(more fonts here),sans-serif 的东西。如果将使用第一个匹配的字体，这样做有什么意义？既然ui-sans-serif是通用字体，那不是一直匹配，后面也不需要加任何字体吗？

解决方法

ui- 泛型应映射到系统的默认字体，而非 ui- 泛型应映射到浏览器的默认字体。

一个网络浏览器可能为所有平台设置了相同的默认字体，但不同的平台确实有不同的默认字体。