useGoogleFontDisplay
¥Summary
-
规则生效日期：
v1.9.4¥Rule available since:
v1.9.4 -
诊断类别：
lint/suspicious/useGoogleFontDisplay¥Diagnostic Category:
lint/suspicious/useGoogleFontDisplay -
此规则为推荐规则，默认启用。
¥This rule is recommended, which means is enabled by default.
-
此规则没有修复方案。
¥This rule doesn’t have a fix.
-
此规则的默认严重级别为 warning。
¥The default severity of this rule is warning.
-
来源：
¥Sources:
-
与
@next/next/google-font-display相同¥Same as
@next/next/google-font-display
-
¥How to configure
{ "linter": { "rules": { "suspicious": { "useGoogleFontDisplay": "error" } } }}¥Description
强制 Google Fonts 使用推荐的 display 策略。
¥Enforces the use of a recommended display strategy with Google Fonts.
display 属性控制字体在加载时的显示方式。使用 Google Fonts 时，务必为此属性指定合适的值，以确保良好的用户体验并防止布局偏移。
¥The display property controls how a font is displayed while it is loading. When using Google Fonts,
it’s important to specify an appropriate value for this property to ensure good user experience and prevent layout shifts.
此规则标记缺少 display 参数，或使用了不太理想的值，例如 auto、block 或 fallback。通常建议使用 &display=optional，因为它能最大限度地减少文本不可见或布局偏移的风险。在需要加载自定义字体后立即切换到该字体的情况下，请考虑使用 &display=swap。
¥This rule flags the absence of the display parameter, or the usage of less optimal values such as auto, block, or fallback.
Using &display=optional is generally recommended as it minimizes the risk of invisible text or layout shifts.
In cases where swapping to the custom font after it has loaded is important, consider using &display=swap.
¥Examples
¥Invalid
<link href="https://fonts.googleapis.com/css2?family=Krona+One" />code-block.jsx:1:12 lint/suspicious/useGoogleFontDisplay ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
⚠ The Google Font link is missing the display parameter.
> 1 │ <link href=“https://fonts.googleapis.com/css2?family=Krona+One” />
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2 │
ℹ Use &display=optional to prevent invisible text and layout shifts. If font swapping is important, use &display=swap.
<link href="https://fonts.googleapis.com/css2?family=Krona+One&display=auto" />code-block.jsx:1:12 lint/suspicious/useGoogleFontDisplay ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
⚠ The Google Font link has a non-recommended display value.
> 1 │ <link href=“https://fonts.googleapis.com/css2?family=Krona+One&display=auto” />
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2 │
ℹ Use &display=optional to prevent invisible text and layout shifts. If font swapping is important, use &display=swap.
<link href="https://fonts.googleapis.com/css2?family=Krona+One&display=block" />code-block.jsx:1:12 lint/suspicious/useGoogleFontDisplay ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
⚠ The Google Font link has a non-recommended display value.
> 1 │ <link href=“https://fonts.googleapis.com/css2?family=Krona+One&display=block” />
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2 │
ℹ Use &display=optional to prevent invisible text and layout shifts. If font swapping is important, use &display=swap.
<link href="https://fonts.googleapis.com/css2?family=Krona+One&display=fallback" />code-block.jsx:1:12 lint/suspicious/useGoogleFontDisplay ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
⚠ The Google Font link has a non-recommended display value.
> 1 │ <link href=“https://fonts.googleapis.com/css2?family=Krona+One&display=fallback” />
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2 │
ℹ Use &display=optional to prevent invisible text and layout shifts. If font swapping is important, use &display=swap.
¥Valid
<link href="https://fonts.googleapis.com/css2?family=Krona+One&display=optional" rel="stylesheet" /><link href="https://fonts.googleapis.com/css2?display=unknown" rel="stylesheet" /><link rel="stylesheet" />¥Related links
Biome v2.1 中文网 - 粤ICP备13048890号