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>
);
};