一个字体堆栈是字体和字体关键字的列表,用于让浏览器知道我们的首选字体和备用字体。例如,字体堆栈可以是“Helvetica Neue, Arial, sans-serif”,这将表明Helvetica Neue是我们最喜欢的字体(如果可用),然后是Arial(大多数计算机上都是),最后是通用的sans-serif字体,这是模糊的,但保证我们不会不小心显示像Times New Roman这样的衬线字体。
亚博Zendesk现在使用系统字体堆栈,它可以识别您的操作系统,并将其本地使用的字体应用于自己的界面。由于您的操作系统针对这些字体进行了优化,因此它们往往加载速度更快,感觉和外观都很好,呈现清晰,并且具有非常完整的支持字符集。以前,Zendesk使用亚博Proxima Nova作为默认字体。
以下是Zend亚博esk的系统字体堆栈:
{font-family: system-ui, -apple-system, BlinkMacSystemFont, " Segoe UI ", Roboto, Oxygen-Sans, Ubuntu, Cantarell, " Helvetica Neue ", Arial, sans-serif;}
这个堆栈反映在整个支持产品中。
操作系统和浏览器细节
窗户
虽然Windows操作系统上的大多数浏览器(包括IE和Edge)不支持使用系统字体的关键字,但我们仍然可以通过在字体堆栈中包含字体“Segoe UI”来匹配它。
macOS
Apple提供了一个新的字体关键字-apple-system,它将解析为系统字体。今天,这就是旧金山.苹果之前已经改变了他们的系统字体,也许有一天会再次改变。当这种情况发生时,使用最新操作系统的用户将在使用font关键字的网站上看到这种字体;旧系统的用户仍然会看到旧金山。
其他地方
Chrome现在支持“system-ui”,这是一个字体关键字,可以解析为系统字体所有操作系统(包括Windows、Mac和Linux)。更多的浏览器将很快添加这个关键字。同时,我们还在堆栈中包含了一些linux专用字体。
为什么是系统字体?
系统字体在字距和可读性方面优于非系统字体。请参阅下面的部分了解更多细节。
字距调整
Windows操作系统和Mac操作系统的系统字体都默认带有字距。字距是指使宽字母和细字母更具可读性的字母间距。一些网页字体,如Proxima Nova,需要启用和调整字距设置。
比邻星新星:
系统字体堆栈:
可读性
系统字体通常比当前的Proxima Nova字体更粗。这使得它更容易阅读,并突出了文本和背景之间的对比。虽然字体变大了一点,但它不会影响您在屏幕上看到的信息量,因为容器大小没有改变。
1评论
有办法改变系统字体吗?我们保存在组织部分中的一些信息包含数字1(1)、小写字母L (L)或大写字母i (i)。这些信息很难相互区分。
请登录留下评论。