过去,我们习惯于这样设置网页中的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
用于保底显示默认的无衬线字体。
通过搭配使用这些属性值,能够有效优化页面字体显示效果。