济南建设监理协会网站,雄安网站建设单位,郑州短视频运营公司,阳江网雨大精神病专科医院网站上的字体很容易成为浏览器在显示页面最终外观和形式之前必须下载的总捆绑大小的一部分。此外#xff0c;我们还需要担心各种问题#xff0c;比如臭名昭著的未样式文本闪烁#xff08;FOUT#xff09;。可以说#xff0c;整个问题的一部分已经得到解决#xff0c;多亏…网站上的字体很容易成为浏览器在显示页面最终外观和形式之前必须下载的总捆绑大小的一部分。此外我们还需要担心各种问题比如臭名昭著的未样式文本闪烁FOUT。可以说整个问题的一部分已经得到解决多亏了font-display属性。
另外网站上的文本几乎总是最重要的部分因此我们不希望出现外观不佳或难以阅读的文本。那么一个精明的网页设计师应该怎么做才能既满足性能又满足外观和感觉呢
一个解决方案是实际上使用用户设备上已安装的字体。过去这不是一个非常优雅的解决方案因为一些流行的系统没有内置美丽的字体。然而现在情况不同了每个主要操作系统都内置了一个看起来和阅读起来都很好的无衬线系统字体。
因此诀窍就是将所有这些默认系统字体名称作为font-family属性的值提供给应该使用系统字体的元素。然后浏览器将使用它在当前系统上找到的第一个字体。请记住这也意味着文本将根据它所在的系统而有所不同。然而这并不一定是件坏事因为文本将感觉与其所在的操作系统相符。
无衬线系统字体堆栈
话不多说这就是在这个网站上使用的系统字体堆栈的版本
body {font-family: -apple-system, BlinkMacSystemFont, Segoe UI,Roboto, Oxygen-Sans, Ubuntu, Cantarell,Helvetica Neue, sans-serif;
}这个堆栈与WordPress使用的堆栈相同并且到目前为止在Alligator.io的内容上运行得相当不错。在这个网站上标题使用可变字体Recursive以增加一些风格但内容本身使用系统字体。
如果你感兴趣这里是这些字体/关键字的详细说明
-apple-system和BlinkMacSystemFont用于引用苹果设备上的系统字体的关键字通常是San Francisco或Helvetica Neue具体取决于操作系统的版本。在一些更新的浏览器中现在可以使用关键字system-ui来执行这两个关键字的工作。Segoe UI用于Windows系统。RobotoAndroid设备的系统字体。Oxygen-Sans使用KDE的Linux系统。UbuntuUbuntu LinuxCantarell使用Gnome的Linux系统不包括Ubuntu。Helvetica Neue许多系统尤其是苹果系统上都有的常见备用字体以防前面的字体都失败了。sans-serif如果一切都失败了回退到默认的浏览器无衬线字体。通常不是最令人愉悦的结果这就是为什么我们不只使用font-family: sans-serif。
和生活中的大多数事情一样系统字体堆栈有许多不同的风格每个都略有不同。例如这是GitHub使用的堆栈。
等宽系统字体堆栈
虽然没有基于衬线字体的系统字体堆栈但有一个等宽字体的堆栈对于代码片段等非常有用。这是Bootstrap v4使用的堆栈GitHub也使用了一个非常相似的版本
code {font-family: SFMono-Regular, Menlo, Monaco,Consolas, Liberation Mono, Courier New, monospace;
}使用font-face的系统字体
如果你厌倦了在CSS的多个地方重复相同的多个字体名称的字符串可以在这篇CSS-Tricks文章中找到一个技巧允许利用font-face规则来定义一个单一名称该名称引用整个堆栈。
