nextjs/google-font-display Correctness
它的作用
强制对 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>
);
};如何使用
To enable this rule using the config file or in the CLI, you can use:
json
{
"plugins": ["nextjs"],
"rules": {
"nextjs/google-font-display": "error"
}
}ts
import { defineConfig } from "oxlint";
export default defineConfig({
plugins: ["nextjs"],
rules: {
"nextjs/google-font-display": "error",
},
});bash
oxlint --deny nextjs/google-font-display --nextjs-plugin版本
此规则添加于 v0.2.0。