<generic-family>

<generic-family> CSS 数据类型 表示 font 简写和 font-family 完整属性中使用的通用字体系列的关键字值。<generic-family> 表示属于该字体类别的，在一个或多个本地安装的字体。

语法

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

值

<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

草书字体的字形通常具有连接笔画或其他草书特征，超出了斜体字体的范围。字形部分或完全连接，结果看起来更像手写笔或刷子书写，而不是印刷字母作品。草书字体示例包括 Brush Script MT、Brush Script Std、Lucida Calligraphy、Lucida Handwriting 和 Apple Chancery。

fantasy

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

system-ui

字形取自给定平台上的默认用户界面字体。由于世界各地排版传统差异很大，因此为无法清晰映射到其他类别的字体提供了这种通用系列。

ui-serif

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

ui-sans-serif

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

ui-monospace

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

ui-rounded

具有圆角特征的默认用户界面字体。

math

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

emoji

专门设计用于渲染表情符号的字体。

fangsong

一种特殊的汉字风格，介于衬线宋体和草书楷体之间。这种风格通常用于政府文件。

示例

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

HTML

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

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;
}

结果

规范

规范
CSS 字体模块第 4 级
# generic-font-families

另请参见