在本演讲中,Monica Dinculescu 深入探讨了网络字体以及 CSS 属性 font-display
如何让我们控制这些字体的渲染方式。她认为,如果我们花一点时间考虑加载的字体总数及其加载方式,就可以获得各种巨大的性能提升。
此外,Monica 创建了一个 便捷的演示,提供了关于 font-display
属性工作原理的更详细的示例系列。
这很大程度上取决于您如何使用网络字体,以及是否需要使用备用字体渲染文本。例如,如果您正在渲染网站上的主体文本,则应使用 font-display:optional。在实现它的浏览器(如 Chrome)上,体验会更好:您的用户将获得快速的内容,如果网络字体下载花费的时间过长,他们不会在阅读文章的过程中遇到页面重新布局。
如果您将网络字体用于图标,则没有可以渲染这些图标的可接受的备用字体(除非您使用表情符号或其他内容),因此您唯一的选择是完全阻止,直到字体准备就绪,使用 font-display:block。