跳至內容

nextjs/google-font-display 正確性

作用

強制使用 Google 字體的 font-display 行為。

為什麼這不好?

指定 `display=optional` 可最大限度地減少文字隱形或版面配置偏移的風險。如果載入後切換到自訂字體對您很重要,則請改用 `display=swap`。

範例

此規則的不正確程式碼範例

jsx
import Head from "next/head";

export default Test = () => {
  return (
    <Head>
      <link href="https://fonts.googleapis.com/css2?family=Krona+One" rel="stylesheet" />
    </Head>
  );
};

此規則的正確程式碼範例

jsx
import Head from "next/head";

export default Test = () => {
  return (
    <Head>
      <link href="https://fonts.googleapis.com/css2?family=Krona+One&display=optional" rel="stylesheet" />
    </Head>
  );
};

參考資料

以 MIT 授權條款發佈。