font-family

概述

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

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

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

语法

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

/* 仅有通用的字体族名 */
font-family: sans-serif;
font-family: serif;
font-family: fantasy;
font-family: cursive;
font-family: monospace;

font-family: inherit

取值

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

规范

浏览器兼容性