过去，我们习惯于这样设置网页中的font-family属性：

font-family: 'PingFangSC-Regular', 'helvetica neue', tahoma, 'microsoft yahei', arial, sans-serif;

我们在font-family属性后面指定了一串字体，这串字体的最后有个sans-serif。

这串代码的作用是从左到右依次查询我们指定的字体：如果当前字体可用，就会将字体应用到网页上；如果当前字体不可用，就会继续向下查询；如果所有指定的字体均不可用，就会选择浏览器的默认sans-serif（无衬线字体）作为网页字体。

这样设置字体虽然看起来灵活，实际上却很死板，因为没有和用户的系统字体结合到一起。

一般来说，网页字体和用户的系统字体保持一致，浏览体验将会更好！

通过设置font-family: system-ui便能够实现这点。

简单来说，system-ui的作用就是在不同操作系统的网页上，自动选择与当前系统的默认字体相同的字体。

system-ui的优势之处在于它与当前操作系统使用的字体相匹配，对于文本内容而言，它可以得到最恰当的展示。

这一功能非常实用，因此普及的很快，目前所有主流浏览器都已基本支持。

Chrome 和 Safari 可以在各种平台上完全支持system-ui，只有Firefox相对落后，但可以搭配-apple-system和BlinkMacSystemFont这两个兼容写法来提高整体兼容性。

例如：font-family: system-ui,-apple-system,BlinkMacSystemFont,segoe ui,Roboto,Helvetica,Arial,sans-serif;

system-ui、-apple-system、BlinkMacSystemFont这三个属性值我们已经明白了，用于选择操作系统的默认字体，下面简单介绍下它们后面的几个字体：

Segoe UI是 Windows 从 Vista 开始的默认西文字体族，属于无衬线体。

Roboto是为Android操作系统设计的一个无衬线字体族，Google 描述该字体为“现代的、但平易近人”和“有感情”的。

Helvetica是一种被广泛使用的的无衬线字体。

Arial是一套随同多套微软应用软件所分发的无衬线字体。

sans-serif用于保底显示默认的无衬线字体。

通过搭配使用这些属性值，能够有效优化页面字体显示效果。