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

Google 字体显示

使用 Google Fonts 强制执行字体显示行为。

此错误发生的原因

对于 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.ac.cn/css2?family=Krona+One&display=optional"
          rel="stylesheet"
        />
      </Head>
    </div>
  )
}

指定 `display=optional` 可最大程度地降低文本不可见或布局偏移的风险。如果您认为加载后切换到自定义字体很重要，则应使用 `display=swap`。

何时不使用它

如果您想专门使用 `auto`、`block` 或 `fallback` 策略显示字体，则可以禁用此规则。