在CSS中使用font-display属性可以控制网页字体的加载行为，以优化用户在字体下载过程中的体验。font-display为你提供了几种不同的选项，使你可以决定浏览器在字体下载时如何展示文本。这些选项包括：
auto: 浏览器默认的字体展示策略。block: 浏览器在字体文件加载过程中短时间内将文本渲染为不可见，之后使用回退字体，直到字体文件加载完成。swap: 浏览器立即显示回退字体，在字体文件加载完成后替换为请求的字体，这是提高内容可见性的推荐选项。fallback: 浏览器在短时间内显示回退字体，如果在这段时间内字体文件还未加载完成，则继续使用回退字体，避免后续的字体闪烁。optional: 浏览器在短时间内尝试加载字体，但如果字体文件加载失败或时间太长，则放弃加载，这种情况下可能一直使用回退字体。
为了符合PageSpeed Insights的建议，通常推荐使用swap选项，因为它确保了文字在字体加载过程中始终可见，同时也允许字体文件一旦下载完成立即使用，从而提升用户体验。
假设你的CSS中有一个@font-face规则，用于加载一个WOFF字体文件，你可以这样添加font-display属性：
@font-face {
font-family: 'MyWebFont';
src: url('mywebfont.woff2') format('woff2'),
url('mywebfont.woff') format('woff');
font-display: swap; /* 推荐用于改善字体加载的性能 */
}
在这个例子中，当MyWebFont字体被请求时，浏览器将立即使用回退字体显示文本，并在WOFF文件下载完成后切换到MyWebFont。这样不仅保证了在字体加载过程中文本的可见性，还提供了一旦字体可用就立即优化显示的机会，对于改善页面的加载性能和用户体验非常有帮助。
发布者：彬彬笔记，转载请注明出处：https://www.binbinbiji.com/css/3208.html
