<generic-family>

语法

值

<generic-family> 枚举类型通过以下列出的值之一指定：

serif

衬线是指字母中较大笔画末端附带的一条小线或笔画。在衬线字体中，字形具有末尾笔画、喇叭形或逐渐变细的末端。示例包括 Lucida Bright、Lucida Fax、Palatino、Palatino Linotype、Palladio 和 URW Palladio。

sans-serif

没有衬线的字体；字形具有平直的笔画末端，没有装饰。无衬线字体示例包括 Open Sans、Fira Sans、Lucida Sans、Lucida Sans Unicode、Trebuchet MS、Liberation Sans 和 Nimbus Sans L。

monospace

所有字形都具有相同的固定宽度。等宽字体示例包括 Fira Mono、DejaVu Sans Mono、Menlo、Consolas、Liberation Mono、Monaco 和 Lucida Console。

cursive

手写字体中的字形通常使用草书脚本或其他手写风格，结果看起来更像手写笔或刷子书写，而不是印刷排版。CSS 使用术语“cursive”来指代任何脚本的字体，包括那些没有连笔的字体。手写字体示例包括 Brush Script MT、Brush Script Std、Lucida Calligraphy、Lucida Handwriting 和 Apple Chancery。

fantasy

奇幻字体主要是装饰性字体，包含字符的俏皮表示。奇幻字体示例包括 Papyrus、Herculanum、Party LET、Curlz MT、Harrington 和 Comic Sans MS。

system-ui

字形取自给定平台上的默认用户界面字体。由于世界各地的排版传统差异很大，此通用字体家族用于那些无法清晰地映射到其他字体家族的字体。

注意：正如其名称所示，system-ui 旨在使 UI 元素看起来像原生应用程序，而不是用于排版大段文本。它可能会导致某些用户显示的字体不理想——例如，默认的 Windows CJK 字体可能会导致拉丁文字体渲染不佳，并且 lang 属性可能不会影响显示的字体。一些操作系统不允许自定义 system-ui，而浏览器通常允许自定义 sans-serif 字体家族。对于大段文本，请使用 sans-serif 或其他非 UI 字体家族。

ui-serif

默认用户界面衬线字体。请参阅上面 serif 的定义。

ui-sans-serif

默认用户界面无衬线字体。请参阅上面 sans-serif 的定义。

ui-monospace

默认用户界面等宽字体。请参阅上面 monospace 的定义。

ui-rounded

默认用户界面圆角字体。

math

用于显示数学表达式的字体，例如上标和下标、跨越多行的括号、嵌套表达式以及具有不同含义的双线字形。

fangsong

一种介于宋体风格和楷体风格之间的特定中文字体风格。这种风格常用于政府文件。

正式语法

<generic-family> = 
  serif          |
  sans-serif     |
  monospace      |
  cursive        |
  fantasy        |
  system-ui      |
  ui-serif       |
  ui-sans-serif  |
  ui-monospace   |
  ui-rounded     |
  math           |
  fangsong       

示例

此示例演示了 font-family 属性的几个 <generic-family> 枚举值。

HTML

<ul>
  <li class="serif">serif</li>
  <li class="sans-serif">sans-serif</li>
  <li class="monospace">monospace</li>
  <li class="cursive">cursive</li>
  <li class="fantasy">fantasy</li>
  <li class="system-ui">system-ui</li>
</ul>

CSS

ul {
  font-size: 1.5rem;
  line-height: 2;
}
.serif {
  font-family: serif;
}
.sans-serif {
  font-family: sans-serif;
}
.monospace {
  font-family: monospace;
}
.cursive {
  font-family: cursive;
}
.fantasy {
  font-family: fantasy;
}
.system-ui {
  font-family: system-ui;
}

结果

规范

另见

• 使用此数据类型的属性：font-family 和 font
• CSS 字体模块