跳至内容

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 许可证发布。