font-family

CSS 属性 font-family 允许您通过给定一个有先后顺序的,由字体名或者字体族名组成的列表来为选定的元素设置字体。

属性值用逗号隔开。浏览器会选择列表中第一个该计算机上有安装的字体,或者是通过 @font-face 指定的可以直接下载的字体。

通常会使用属性缩写 font 来设置 font-size 和其他与字体相关的属性。

应当至少在使用的 font-family 列表中添加一个通用的字体族名,因为无法保证用户的计算机内已经安装了指定的字体,也不能保证使用 @font-face 提供的字体移动能够正确地下载。提供通用的字体族使得浏览器可以在无法得到最佳字体的情况下使用一个相对接近的备选字体。

font-family 属性指定的是一个优先级从高到低的可选字体列表。 字体的选定不是在发现用户计算机上安装的列表中的第一个字体时停止。相反,对字体的选择是逐字进行的。也就是说即使某个字符周围都在某个字体中可以显示,但该字符在当前的字体文件中没有适合的图形,那么会继续尝试列表中靠后的字体。(不过这在 Internet Explorer 6 以及之前的版本的 IE 浏览器中不适用。)当一个字体只在某些特定的 font-stylefont-variant、或 font-size 属性值下有效时,这些属性的值也可能对字体族 font family 的选择造成影响。

语法

/* 一个字体族名和一个通用字体族名 */
font-family: Gill Sans Extrabold, sans-serif;
font-family: "Goudy Bookletter 1911", sans-serif;

/* 仅有一个通用字体族名 */
font-family: serif;
font-family: sans-serif;
font-family: monospace;
font-family: cursive;
font-family: fantasy;
font-family: system-ui;
font-family: emoji;
font-family: math;
font-family: fangsong;

/* 全局值 */
font-family: inherit;
font-family: initial;
font-family: unset;

The font-family property lists one or more font families, separated by commas. Each font family is specified as either a <family-name> or a <generic-name> value.

The example below lists two font families, the first with a <family-name> and the second with a <generic-name>:

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

取值

<family-name>
一个字体族的名字。例如"Times" 和 "Helvetica" 都是字体族名。字体族名可以包含空格,但包含空格时应该用引号。
<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
从浏览器所处平台处获取的默认用户界面字体。由于世界各地的排版习惯之间有很大的差异,这个通用选项 is provided for typefaces that don't map cleanly into the other generics.
math
针对显示数学相关字符的特殊样式问题而设计的字体:支持上标和下标、跨行括号、嵌套表达式和具有不同含义的 double struck glyph。
emoji
专门用于呈现 Emoji 表情符号的字体。
fangsong
一种汉字字体,介于宋体和楷体之间。这种字体常用于某些政府文件。

有效的字体族名

字体族名或者是引号包括的字符串,或者是不含引号的一个或多个合法标识串构成的。这意味着在没有带引号的字体族名的开头是不能使用标点符号字符和数字字符的。

例如,以下的声明是有效的:

font-family: Gill Sans Extrabold, sans-serif;
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;

正式语法

[ <family-name> | <generic-family> ]#

where
<family-name> = <string> | <custom-ident>+
<generic-family> = serif | sans-serif | cursive | fantasy | monospace

示例

一些通用字体

.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 Fonts Module Level 4
generic font families
Working Draft Adds new generic font families, specifically: system-ui, emoji, math, and fangsong.
CSS Fonts Module Level 3
font-family
Candidate Recommendation No significant change
CSS Level 2 (Revision 1)
font-family
Recommendation No significant change
CSS Level 1
font-family
Recommendation Initial definition
初始值depends on user agent
适用元素all elements. It also applies to ::first-letter and ::first-line.
是否是继承属性yes
适用媒体visual
计算值as specified
Animation typediscrete
正规顺序the unique non-ambiguous order defined by the formal grammar

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
font-familyChrome Full support 1Edge Full support 12Firefox Full support 1
Notes
Full support 1
Notes
Notes Not supported on option elements. See bug 1536148.
IE Full support 3Opera Full support 3.5Safari Full support 1WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support Yes
system-ui
Experimental
Chrome Full support 56Edge No support NoFirefox No support No
No support No
Full support 43
Notes Alternate Name
Notes Supported on macOS only.
Alternate Name Uses the non-standard name: -apple-system
IE No support NoOpera Full support 43Safari Full support 9
Notes Alternate Name
Full support 9
Notes Alternate Name
Notes Supported since macOS 10.11.
Alternate Name Uses the non-standard name: -apple-system
WebView Android Full support 56Chrome Android Full support 56Firefox Android No support NoOpera Android Full support 43Safari iOS Full support 9
Alternate Name
Full support 9
Alternate Name
Alternate Name Uses the non-standard name: -apple-system
Samsung Internet Android Full support 6.0

Legend

Full support  
Full support
No support  
No support
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
See implementation notes.
See implementation notes.
Uses a non-standard name.
Uses a non-standard name.