网页字体的推荐写法,网站font-family字体该如何设置

过去,我们习惯于这样设置网页中的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-systemBlinkMacSystemFont这三个属性值我们已经明白了,用于选择操作系统的默认字体,下面简单介绍下它们后面的几个字体:

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

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

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

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

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

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