Google 字体显示
使用 Google Fonts 强制执行 font-display 行为。
发生此错误的原因
对于 Google 字体,font-display 描述符缺失或设置为 auto
、block
或 fallback
,这些都不推荐使用。
可能的修复方法
对于大多数情况,自定义字体的最佳字体显示策略是 optional
。
pages/index.js
import Head from 'next/head'
export default function IndexPage() {
return (
<div>
<Head>
<link
href="https://fonts.googleapis.com/css2?family=Krona+One&display=optional"
rel="stylesheet"
/>
</Head>
</div>
)
}
指定 display=optional
可以最大限度地降低不可见文本或布局偏移的风险。如果对您来说,在自定义字体加载后切换到该字体很重要,请改用 display=swap
。
何时不使用它
如果您想专门使用 auto
、block
或 fallback
策略显示字体,则可以禁用此规则。
有用的链接
这有帮助吗?