试一试
font-family: "Georgia", serif;
font-family: "Gill Sans", sans-serif;
font-family: sans-serif;
font-family: serif;
font-family: cursive;
font-family: system-ui;
<section id="default-example">
<p id="example-element">
London. Michaelmas term lately over, and the Lord Chancellor sitting in
Lincoln's Inn Hall. Implacable November weather. As much mud in the streets
as if the waters had but newly retired from the face of the earth, and it
would not be wonderful to meet a Megalosaurus, forty feet long or so,
waddling like an elephantine lizard up Holborn Hill.
</p>
</section>
section {
font-size: 1.2em;
}
值由逗号分隔，表示它们是备选项。浏览器会选择列表中第一个被用户计算机安装的字体，或者可以通过 @font-face 规则下载的字体。
使用简写属性 font 来一次性设置 font-size 和其他与字体相关的属性通常很方便。
你应该始终在 font-family 列表中至少包含一个通用字体族名，因为无法保证任何给定的字体都可用。这使得浏览器在必要时能够选择一个可接受的备用字体。
font-family 属性指定一个从最高优先级到最低优先级的字体列表。字体的选择不会在列表中第一个存在于用户系统上的字体处停止。相反，字体选择是逐个字符进行的，因此如果一个可用字体没有所需字符的字形，则会尝试列表后面的字体。当一个字体只有某些样式、变体或大小可用时，这些属性也可能影响选择哪个字体族。
语法
/* A font family name and a generic family name */
font-family: "Gill Sans Extrabold", sans-serif;
font-family: "Goudy Bookletter 1911", sans-serif;
/* A generic family name only */
font-family: serif;
font-family: sans-serif;
font-family: monospace;
font-family: cursive;
font-family: fantasy;
font-family: system-ui;
font-family: ui-serif;
font-family: ui-sans-serif;
font-family: ui-monospace;
font-family: ui-rounded;
font-family: math;
font-family: fangsong;
/* Global values */
font-family: inherit;
font-family: initial;
font-family: revert;
font-family: revert-layer;
font-family: unset;
font-family 属性列出一个或多个由逗号分隔的字体族。每个字体族都指定为 <family-name> 或 <generic-name> 值。
下面的例子列出了两个字体族，第一个是 <family-name>，第二个是 <generic-name>。
font-family: "Gill Sans Extrabold", sans-serif;
值
<family-name>-
字体族的名称。这必须是单个
<string>值或由空格分隔的<custom-ident>值序列。字符串值必须用引号括起来，但可以包含任何 Unicode 字符。自定义标识符不用引号，但某些字符必须进行转义。一个好的做法是，为包含空格、数字或除连字符以外的标点符号的字体族名称加上引号。
另请参阅有效的字体族名称。
<generic-name>-
通用字体族是一种备用机制，是当所有指定的字体都不可用时，保留样式表作者部分意图的一种方式。通用字体族名称是关键字，并且不能用引号括起来。通用字体族应该是字体族名称列表中的最后一项。定义了以下关键字：
serif-
字形有收尾笔画，末端有外张或锥形，或有实际的衬线收尾。
例如：Lucida Bright、Lucida Fax、Palatino、Palatino Linotype、Palladio、URW Palladio、serif。
sans-serif-
字形的笔画末端是平直的。
例如：Open Sans、Fira Sans、Lucida Sans、Lucida Sans Unicode、Trebuchet MS、Liberation Sans、Nimbus Sans L、sans-serif。
monospace-
所有字形都有相同的固定宽度。
例如：Fira Mono、DejaVu Sans Mono、Menlo、Consolas、Liberation Mono、Monaco、Lucida Console、monospace。
cursive-
手写体字体中的字形通常具有连接笔画或超出斜体字体的其他草书特征。字形部分或完全连接，结果看起来更像手写的钢笔或毛笔字，而不是印刷字母。
例如：Brush Script MT、Brush Script Std、Lucida Calligraphy、Lucida Handwriting、Apple Chancery、cursive。
fantasy-
Fantasy 字体主要是包含有趣的字符表示的装饰性字体。
例如：Papyrus、Herculanum、Party LET、Curlz MT、Harrington、fantasy。
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-
一种介于衬线风格的宋体和草书风格的楷体之间的特殊中文字体风格。这种风格常用于政府文件。
正式定义
| 初始值 | 取决于用户代理 |
|---|---|
| 应用于 | 所有元素和文本。它也适用于 ::first-letter 和 ::first-line。 |
| 继承性 | 是 |
| 计算值 | 同指定值 |
| 动画类型 | 离散 |
正式语法
font-family =
[ <family-name> | <generic-family> ]#
<family-name> =
<string> |
<custom-ident>+
<generic-family> =
<generic-script-specific> |
<generic-complete> |
<generic-incomplete>
<generic-script-specific> =
generic( fangsong ) |
generic( kai ) |
generic( khmer-mul ) |
generic( nastaliq )
<generic-complete> =
serif |
sans-serif |
system-ui |
cursive |
fantasy |
math |
monospace
<generic-incomplete> =
ui-serif |
ui-sans-serif |
ui-monospace |
ui-rounded
示例
一些常见的字体族
.serif {
font-family: "Times", "Times New Roman", "Georgia", serif;
}
.sansserif {
font-family: "Verdana", "Helvetica", "Arial", sans-serif;
}
.monospace {
font-family: "Lucida Console", "Courier New", monospace;
}
.cursive {
font-family: cursive;
}
.fantasy {
font-family: fantasy;
}
.math {
font-family: math;
}
.fangsong {
font-family: fangsong;
}
有效的字体族名称
以下声明是有效的：
font-family: "Goudy Bookletter 1911", sans-serif;
以下声明是无效的：
font-family: Goudy Bookletter 1911, sans-serif;
font-family: Red/Black, sans-serif;
font-family: "Lucida" Grande, sans-serif;
font-family: Ahem!, sans-serif;
font-family: test@foo, sans-serif;
font-family: #POUND, sans-serif;
font-family: Hawaii 5-0, sans-serif;
以下示例技术上有效，但不推荐：
font-family:
Gill Sans Extrabold,
sans-serif;
规范
| 规范 |
|---|
| CSS 字体模块第 4 级 # 通用字体族 |
| CSS 字体模块第 4 级 # font-family 属性 |
浏览器兼容性
加载中…