path: root/files/zh-cn/web/css/font-family/index.html

---
title: font-family
slug: Web/CSS/font-family
tags:
  - CSS
  - CSS Font
  - 参考
  - 字体
translation_of: Web/CSS/font-family
---
<div>{{CSSRef}}</div>

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

<div>{{EmbedInteractiveExample("pages/css/font-family.html")}}</div>



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

<p>通常会使用属性缩写 {{cssxref("font")}} 来设置 <code>font-size</code> 和其他与字体相关的属性。</p>

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

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

<h2 id="语法">语法</h2>

<pre class="brush:css; no-line-numbers notranslate">/* 一个字体族名和一个通用字体族名 */
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;
</pre>

<p>属性 <code>font-family</code> 列举一个或多个由逗号隔开的字体族。每个字体族由 <code><a href="#&lt;family-name>">&lt;family-name&gt;</a></code> 或 <code><a href="#&lt;generic-name>">&lt;generic-name&gt;</a></code> 值指定。</p>

<p>下面的例子列举了两个字体族，其中第一个是 <code>&lt;family-name&gt;</code>，第二个是 <code>&lt;generic-name&gt;</code>：</p>

<pre class="brush: css; notranslate">font-family: "Gill Sans Extrabold", sans-serif;</pre>

<h3 id="取值">取值</h3>

<dl>
 <dt><code>&lt;family-name&gt;</code></dt>
 <dd>一个字体族的名字。例如"Times" 和 "Helvetica" 都是字体族名。字体族名可以包含空格，但包含空格时应该用引号。</dd>
 <dt><code>&lt;generic-name&gt;</code></dt>
 <dd>
 <p>通用字体族名是一种备选机制，用于在指定的字体不可用时给出较好的字体。通用字体族名都是关键字，所以不可以加引号。 在列表的末尾应该至少有一个通用字体族名。 以下是该属性可能的取值以及他们的定义。</p>

 <dl>
  <dt><code>serif</code></dt>
  <dd style="font-family: serif;">带衬线字体，笔画结尾有特殊的装饰线或衬线。<br>
  例如： <span style="font-family: lucida bright,serif;">Lucida Bright</span>, <span style="font-family: lucida fax,serif;">Lucida Fax</span>, <span style="font-family: palatino,serif;">Palatino</span>, <span style="font-family: palatino linotype,serif;">"Palatino Linotype"</span>, <span style="font-family: palladio,serif;">Palladio</span>, <span style="font-family: urw palladio,serif;">"URW Palladio"</span>, <span style="font-family: serif;">serif</span>.</dd>
  <dt><code>sans-serif</code></dt>
  <dd style="font-family: sans-serif;">无衬线字体，即笔画结尾是平滑的字体。<br>
  例如， <span style="font-family: open sans,sans-serif;">"Open Sans"</span>, <span style="font-family: fira sans,sans-serif;">"Fira Sans"</span>, <span style="font-family: lucida sans,sans-serif;">"Lucida Sans"</span>, <span style="font-family: lucida sans unicode sans-serif;">"Lucida Sans Unicode"</span>, <span style="font-family: trebuchet ms,sans-serif;">"Trebuchet MS"</span>, <span style="font-family: liberation sans,sans-serif;">"Liberation Sans"</span>, <span style="font-family: nimbus sans l,sans-serif;">"Nimbus Sans L"</span>, <span style="font-family: sans-serif;">sans-serif</span>.</dd>
  <dt><code>monospace</code></dt>
  <dd style="font-family: monospace;">等宽字体，即字体中每个字宽度相同。<br>
  例如， <span style="font-family: fira mono,monospace;">"Fira Mono"</span>, <span style="font-family: dejavu sans mono,monospace;">"DejaVu Sans Mono"</span>, <span style="font-family: menlo,monospace;">Menlo</span>, <span style="font-family: consolas,monospace;">Consolas</span>, <span style="font-family: liberation mono,monospace;">"Liberation Mono"</span>, <span style="font-family: monaco,monospace;">Monaco</span>, <span style="font-family: lucida console,monospace;">"Lucida Console"</span>, <span style="font-family: monospace;">monospace</span>.</dd>
  <dt><code>cursive</code></dt>
  <dd style="font-family: cursive;">草书字体。这种字体有的有连笔，有的还有特殊的斜体效果。因为一般这种字体都有一点连笔效果，所以会给人一种手写的感觉。<br>
  例如，<span style="font-family: brush script mt,cursive;">"Brush Script MT</span>", <span style="font-family: brush script std,cursive;">"Brush Script Std</span>", <span>"Lucida Calligraphy"</span>, <span>"Lucida Handwriting"</span>, <span style="font-family: apple chancery,cursive;">"Apple Chancery"</span>, <span style="font-family: cursive;">cursive</span>.</dd>
  <dt><code>fantasy</code></dt>
  <dd style="font-family: fantasy;">Fantasy 字体主要是那些具有特殊艺术效果的字体。<br>
  例如，<span style="font-family: papyrus,fantasy;">Papyrus</span>, <span style="font-family: herculanum,fantasy;">Herculanum</span>, <span style="font-family: party let,fantasy;">Party LET</span>, <span style="font-family: curlz mt,fantasy;">Curlz MT</span>, <span style="font-family: harrington,fantasy;">Harrington</span>, <span style="font-family: fantasy;">fantasy</span>.</dd>
  <dt><code>system-ui</code></dt>
  <dd>从浏览器所处平台处获取的默认用户界面字体。由于世界各地的排版习惯之间有很大的差异，这个通用选项 is provided for typefaces that don't map cleanly into the other generics.</dd>
  <dt><code>math</code></dt>
  <dd>针对显示数学相关字符的特殊样式问题而设计的字体：支持上标和下标、跨行括号、嵌套表达式和具有不同含义的double struck glyphs。</dd>
  <dt><code>emoji</code></dt>
  <dd>专门用于呈现 Emoji 表情符号的字体。</dd>
  <dt><code>fangsong</code></dt>
  <dd>一种汉字字体，介于宋体和楷体之间。这种字体常用于某些政府文件。</dd>
 </dl>
 </dd>
</dl>

<h3 id="有效的字体族名">有效的字体族名</h3>

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

<p>例如，以下的声明是有效的：</p>

<pre class="brush: css; example-good notranslate">font-family: "Gill Sans Extrabold", sans-serif;
font-family: "Goudy Bookletter 1911", sans-serif;</pre>

<p>以下的声明是<strong>无效的</strong>：</p>

<pre class="brush: css; example-bad notranslate">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;</pre>

<h3 id="正式语法">正式语法</h3>

<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre>

<h2 id="示例">示例</h2>

<h3 id="一些通用字体">一些通用字体</h3>

<pre class="brush: css; notranslate">.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;
}
</pre>

<div class="hidden">
<pre class="brush: html; notranslate">&lt;div class="serif"&gt;
  This is an example of a serif font.
&lt;/div&gt;

&lt;div class="sansserif"&gt;
  This is an example of a sans-serif font.
&lt;/div&gt;

&lt;div class="monospace"&gt;
  This is an example of a monospace font.
&lt;/div&gt;

&lt;div class="cursive"&gt;
  This is an example of a cursive font.
&lt;/div&gt;

&lt;div class="fantasy"&gt;
  This is an example of a fantasy font.
&lt;/div&gt;

&lt;div class="math"&gt;
  This is an example of a math font.
&lt;/div&gt;

&lt;div class="emoji"&gt;
  This is an example of an emoji font.
&lt;/div&gt;

&lt;div class="fangsong"&gt;
  This is an example of a fangsong font.
&lt;/div&gt;</pre>
</div>

<p>{{EmbedLiveSample("Some_common_font_families", 600, 120)}}</p>

<h2 id="规范">规范</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">规范</th>
   <th scope="col">状态</th>
   <th scope="col">说明</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("CSS4 Fonts", "#generic-font-families", "generic font families")}}</td>
   <td>{{Spec2("CSS4 Fonts")}}</td>
   <td>Adds new generic font families, specifically: <code>system-ui</code>, <code>emoji</code>, <code>math</code>, and <code>fangsong</code>.</td>
  </tr>
  <tr>
   <td>{{SpecName("CSS3 Fonts", "#font-family-prop", "font-family")}}</td>
   <td>{{Spec2("CSS3 Fonts")}}</td>
   <td>No significant change</td>
  </tr>
  <tr>
   <td>{{SpecName("CSS2.1", "fonts.html#propdef-font-family", "font-family")}}</td>
   <td>{{Spec2("CSS2.1")}}</td>
   <td>No significant change</td>
  </tr>
  <tr>
   <td>{{SpecName("CSS1", "#font-family", "font-family")}}</td>
   <td>{{Spec2("CSS1")}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<p>{{CSSInfo}}</p>

<h2 id="浏览器兼容性">浏览器兼容性</h2>



<p>{{Compat("css.properties.font-family")}}</p>