概述

CCS属性font-family允许您通过给定一个有先后顺序的,由字体名或者字体族名组成的列表来为选定的元素设置字体。 属性的值用逗号隔开。浏览器会选择列表中第一个该计算机上有安装的字体,或者是通过 @font-face 指定的可以直接下载的字体。

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

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

注意: font-family 属性指定的是一个优先级从高到低的可选字体列表。 字体的选定不是在发现用户计算机上安装的列表中的第一个字体时停止。相反,对字体的选择是逐字进行的。也就是说即使某个字符周围都在某个字体中可以显示,但该字符在当前的字体文件中没有适合的图形,那么会继续尝试列表中靠后的字体。不过这在Internet Explorer 6以及之前的版本中不适用。

当一个字体只在某些特定的stylesvariants、或sizes属性值下有效时,这些属性的值也可能对font family的选择造成影响。

初始值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

语法

/* 一个字体族名和一个通用的字体族名 */
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: inherit;
font-family: initial;
font-family: unset

 

取值

<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字体主要是那些具有特殊艺术效果的字体。
E.g. Papyrus, Herculanum, Party LET, Curlz MT, Harrington, fantasy.

有效的字体族名

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

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

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;

Formal syntax

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

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

示例

示例 1

body {
  font-family: "Gill Sans Extrabold", Helvetica, sans-serif;
}

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

示例 2

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

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

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

.examplecursive {
    font-family: cursive;
}

.examplefantasy {
    font-family: fantasy;
}
<div class="exampleserif">
This is an example of a serif font.
</div>

<div class="examplesansserif">
This is an example of a sans-serif font.
</div>

<div class="examplemonospace">
This is an example of a monospace font.
</div>

<div class="examplecursive">
This is an example of a cursive font.
</div>

<div class="examplefantasy">
This is an example of a fantasy font.
</div>

Live Sample

规范

规范 状态 说明
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-familiy
Recommendation Initial definition

浏览器兼容性

特性 Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 1.0 (1.7 or earlier) 3.0 3.5 1.0
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 1.0 1.0 (1) 6.0 6.0 1.0

文档标签和贡献者

标签: 
 此页面的贡献者: yuduxyz, fscholz, Sebastianz, iLeemo, linmx0130, FredWe
 最后编辑者: yuduxyz,