跳到内容
文档错误Google 字体显示

Google 字体显示

使用 Google 字体强制执行 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 策略来显示字体，则可以禁用此规则。