跳到主要內容
文件錯誤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 策略來顯示字體，則可以停用此規則。