Skip to content
Biome 中文网
开发文档 当前版本 v1.9

useGenericFontNames

诊断类别：lint/a11y/useGenericFontNames

¥Diagnostic Category: lint/a11y/useGenericFontNames

自从：v1.8.0

¥Since: v1.8.0

来源：

¥Sources:

禁止在字体系列中缺少通用系列关键字。

¥Disallow a missing generic family keyword within font families.

通用字体系列可以是：

¥The generic font family can be:

  • 放置在字体系列列表中的任何位置

    ¥placed anywhere in the font family list

  • 如果使用与属性继承或系统字体相关的关键字，则省略

    ¥omitted if a keyword related to property inheritance or a system font is used

此规则检查字体和字体系列属性。以下特殊情况被忽略：

¥This rule checks the font and font-family properties. The following special situations are ignored:

  • 具有关键字值的属性，例如 inherit、initial。

    ¥Property with a keyword value such as inherit, initial.

  • 最后一个值是 CSS 变量。

    ¥The last value being a CSS variable.

  • @font-face 规则中的 font-family 属性。

    ¥font-family property in an @font-face rule.

示例

Section titled 示例

¥Examples

无效

Section titled 无效

¥Invalid

a { font-family: Arial; }
code-block.css:1:18 lint/a11y/useGenericFontNames ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Generic font family missing.
  
  > 1 │ a { font-family: Arial; }
      │                  ^^^^^
    2 │ 
  
  ℹ Consider adding a generic font family as a fallback.
  
  ℹ For examples and more information, see the MDN Web Docs
  
  - serif
  - sans-serif
  - monospace
  - etc.
  
a { font: normal 14px/32px -apple-system, BlinkMacSystemFont; }
code-block.css:1:43 lint/a11y/useGenericFontNames ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Generic font family missing.
  
  > 1 │ a { font: normal 14px/32px -apple-system, BlinkMacSystemFont; }
      │                                           ^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Consider adding a generic font family as a fallback.
  
  ℹ For examples and more information, see the MDN Web Docs
  
  - serif
  - sans-serif
  - monospace
  - etc.

有效

Section titled 有效

¥Valid

a { font-family: "Lucida Grande", "Arial", sans-serif; }
a { font-family: inherit; }
a { font-family: sans-serif; }
a { font-family: var(--font); }
@font-face { font-family: Gentium; }

相关链接

Section titled 相关链接

¥Related links