nextjs/google-font-display 正确性
它的作用
强制使用 Google Fonts 时指定 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>
);
};如何使用
要通过配置文件或 CLI 启用 此规则，可以使用：
json
{
"plugins": ["nextjs"],
"rules": {
"nextjs/google-font-display": "error"
}
}bash
oxlint --deny nextjs/google-font-display --nextjs-plugin