CSS 数据类型 - generic-family

CSS 数据类型 <generic-family> 表示通用字体系列的关键字值。这些是可以在 font 简写属性和 font-family 属性普通书写中指定的回退字体系列。

此数据类型表示属于特定字体类别的一个或多个本地安装的字体。

可能的值

CSS 数据类型 <generic-family> 使用以下值之一指定：

serif：衬线字体的通用字体系列（例如，Times New Roman）。
sans-serif：sans-serif 字体的通用字体系列（例如，Lucida Sans、Fira Sans、Open Sans 等）
monospace：等宽或固定间距字体的通用字体系列。（例如，Fira mono、Menlo、Consolas、Lonaco 等）
cursive：草书字体的通用字体系列（例如，Brsuh Script MT、Lucida Calligraphy、Apple Chancery 等）
fantasy：用于 fantasy 或装饰字体的通用字体系列（例如 Papyrus、Party LET、Curlz MT、Harrington 等）
system-ui：字形是从任何给定平台上的默认用户界面字体绘制的。不映射到其他字体的字体由此通用系列提供。
ui-serif：默认用户界面衬线字体。
ui-sans-serif：默认用户界面 sans-serif 字体。
ui-monospace：默认用户界面等宽字体。
ui-rounded：具有圆角功能的默认用户界面字体。
math：通用字体系列，用于显示数学表达式，如上标、下标、括号、嵌套表达式和双划线字形。
emoji：用于显示 emoji 的通用字体系列。
fangsong：表示汉字的通用字体系列，介于衬线式宋式和草书式 Kai 之间。

语法


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

CSS <generic-family> - 使用 font-family 属性

以下示例演示了数据类型 <generic-family> 与 font-family 属性一起使用的用法：


<html>
<head>
<style>
	 	p {
	 	 	 font-size: 2.5rem;
	 	 	 line-height: 0.8rem;
	 	}
	 	
	 	.ff-serif {
	 	 	 font-family: Palatino;
	 	 	 color: blue;
	 	}
	 	
	 	.ff-sans-serif {
	 	 	 font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
	 	 	 color: red;
	 	}
	 	
	 	.ff-monospace {
	 	 	 font-family: monospace;
	 	 	 color: green;
	 	}
	 	
	 	.ff-cursive {
	 	 	 font-family: Brush Script MT, cursive;
	 	 	 color: purple;
	 	}
	 	
	 	.ff-fantasy {
	 	 	 font-family: Harrington, fantasy;
	 	 	 color: teal;
	 	}
	 	
	 	.ff-system-ui {
	 	 	 font-family: system-ui;
	 	 	 color: brown;
	 	}
	 	
	 	.ff-ui-serif {
	 	 	 font-family: ui-serif;
	 	 	 color: black;
	 	}
	 	
	 	.ff-ui-rounded {
	 	 	 font-family: ui-rounded;
	 	 	 color: hotpink;
	 	}
	 	
	 	.ff-math {
	 	 	 font-family: math;
	 	 	 color: chocolate;
	 	}
</style>
</head>
<body>
	 	<div>
	 	 	 <p class="ff-serif">serif</p>
	 	 	 <p class="ff-sans-serif">sans-serif</p>
	 	 	 <p class="ff-monospace">monospace</p>
	 	 	 <p class="ff-cursive">cursive</p>
	 	 	 <p class="ff-fantasy">fantasy</p>
	 	 	 <p class="ff-system-ui">system-ui</p>
	 	 	 <p class="ff-ui-serif">ui-serif</p>
	 	 	 <p class="ff-ui-rounded">ui-rounded</p>
	 	 	 <p class="ff-math">{1 2}</p>
	 	 	 <p class="ff-fangsong">fangsong</p>
	 	</div>
</body>
</html>

打印本页