font-family

**font-family** CSS 属性指定一个或多个字体系列名称和/或通用字体系列名称的优先级列表，用于所选元素。

试一试

值用逗号分隔，表示它们是备选方案。浏览器将选择列表中第一个已安装或可以使用 @font-face At规则下载的字体。

通常使用简写属性 font 一次设置 font-size 和其他与字体相关的属性会比较方便。

您应该始终在 font-family 列表中包含至少一个通用字体系列名称，因为无法保证任何给定的字体都可用。这样可以让浏览器在必要时选择可接受的备用字体。

font-family 属性指定一个字体列表，从最高优先级到最低优先级。字体选择 *不会* 停止在列表中第一个用户系统上的字体。相反，字体选择是 *逐个字符* 进行的，因此，如果可用字体没有所需字符的字形，则会尝试后来的字体。当字体仅在某些 样式、变体 或 大小 中可用时，这些属性也可能会影响选择哪个字体系列。

语法

css
/* 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: emoji;
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>

css
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。

草书

草书字体中的字形通常具有连接笔画或其他草书特征，超出了斜体字体的范围。字形部分或完全连接，其结果看起来更像是手写钢笔或毛笔书写，而不是印刷的字母作品。

例如：Brush Script MT、Brush Script Std、Lucida Calligraphy、Lucida Handwriting、Apple Chancery、cursive。

幻想

幻想字体主要是装饰字体，包含字符的趣味化表现形式。

例如：Papyrus、Herculanum、Party LET、Curlz MT、Harrington、fantasy。

系统界面

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

ui-serif

默认用户界面衬线字体。

ui-sans-serif

默认用户界面无衬线字体。

ui-monospace

默认用户界面等宽字体。

ui-rounded

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

数学

这针对表示数学的特定风格关注点：上标和下标、跨越多行的括号、嵌套表达式以及具有不同含义的双重击打字形。

表情符号

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

仿宋

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

正式定义

初始值取决于用户代理
应用于所有元素和文本。它也适用于 ::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( kai )       |
  generic( fangsong )  |
  generic( nastaliq )  

<generic-complete> = 
  serif       |
  sans-serif  |
  system-ui   |
  cursive     |
  fantasy     |
  math        |
  monospace   

<generic-incomplete> = 
  ui-serif       |
  ui-sans-serif  |
  ui-monospace   |
  ui-rounded

示例

一些常见的字体家族

css
.serif {
  font-family: Times, "Times New Roman", Georgia, serif;
}

.sansserif {
  font-family: Verdana, Arial, Helvetica, sans-serif;
}

.monospace {
  font-family: "Lucida Console", Courier, monospace;
}

.cursive {
  font-family: cursive;
}

.fantasy {
  font-family: fantasy;
}

.emoji {
  font-family: emoji;
}

.math {
  font-family: math;
}

.fangsong {
  font-family: fangsong;
}

有效的字体名称

以下声明有效

css
font-family: "Goudy Bookletter 1911", sans-serif;

以下声明无效

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

以下示例在技术上有效，但不推荐

css
font-family:
  Gill Sans Extrabold,
  sans-serif;

规范

规范
CSS 字体模块级别 4
# 通用字体族
CSS 字体模块级别 4
# 字体族属性

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅