---
title: '@font-face'
slug: Web/CSS/@font-face
tags:
  - '@规则'
  - 字体
translation_of: Web/CSS/@font-face
---
<div>{{CSSRef}}</div>

<div>@font-face CSS at-rule 指定一个用于显示文本的自定义字体；字体能从远程服务器或者用户本地安装的字体加载. 如果提供了local()函数，从用户本地查找指定的字体名称，并且找到了一个匹配项, 本地字体就会被使用. 否则, 字体就会使用url()函数下载的资源。</div>

<div></div>

<div>通过允许作者提供他们自己的字体，@font-face 让设计内容成为了一种可能，同时并不会被所谓的"网络-安全"字体所限制(字体如此普遍以至于它们能被广泛的使用). 指定查找和使用本地安装的字体名称可以让字体的自定义化程度超过基本字体，同时在不依赖网络情况下实现此功能。</div>

<div></div>

<div>在同时使用url()和local()功能时，为了用户已经安装的字体副本在需要使用时被使用，如果在用户本地没有找到字体副本就会去使用户下载的副本查找字体。</div>

<div></div>

<div>@font-face 规则不仅仅使用在CSS的顶层，还可以用在任何CSS条件组规则中.</div>

<div></div>

<pre class="brush: css no-line-numbers notranslate">@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}</pre>

<h2 id="概述">概述</h2>

<p>这是一个叫做<code>@font-face</code> 的<a href="/zh-CN/docs/CSS" title="CSS">CSS</a> <a href="/zh-CN/docs/CSS/At-rule" title="At-rule">@规则</a> ，它允许网页开发者为其网页指定在线字体。 通过这种作者自备字体的方式，<code>@font-face</code> 可以消除对用户电脑字体的依赖。 <code>@font-face</code> 不仅可以放在在CSS的最顶层, 也可以放在 @规则 的 <a href="/zh-CN/docs/CSS/At-rule#Conditional_Group_Rules" title="CSS/At-rule#Conditional_Group_Rules">条件规则组</a> 中。</p>

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

{{csssyntax}}

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

<dl>
 <dt>{{cssxref("@font-face/font-family", "font-family")}}</dt>
 <dd>所指定的字体名字将会被用于font或font-family属性( i.e. font-family: &lt;family-name&gt;; )</dd>
 <dt>{{cssxref("@font-face/src", "src")}}</dt>
 <dd>远程字体文件位置的URL或者用户计算机上的字体名称， 可以使用local语法通过名称指定用户的本地计算机上的字体( i.e. src: local('Arial'); )。 如果找不到该字体，将会尝试其他来源，直到找到它。</dd>
 <dt>{{cssxref("@font-face/font-variant", "font-variant")}}</dt>
 <dd>A {{cssxref("font-variant")}} value.</dd>
 <dt>{{cssxref("@font-face/font-stretch", "font-stretch")}}</dt>
 <dd>A {{cssxref("font-stretch")}} value.</dd>
 <dt>{{cssxref("@font-face/font-weight", "font-weight")}}</dt>
 <dd>A {{cssxref("font-weight")}} value.</dd>
 <dt>{{cssxref("@font-face/font-style", "font-style")}}</dt>
 <dd>对于src所指字体的描述。如果所需字体符合描述，则采用本font-face所定义的字体。</dd>
 <dt>{{cssxref("@font-face/unicode-range", "unicode-range")}}</dt>
 <dd>在该@font-face中定义的unicode字体范围</dd>
</dl>

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

<p>下面的例子简单定义了一个可下载的字体，并应用到了文档的整个body标签上。</p>

<p><a href="/@api/deki/files/2935/=webfont-sample.html" title="/@api/deki/files/2935/=webfont-sample.html">View live sample</a></p>

<pre class="notranslate">&lt;html&gt;
&lt;head&gt;
  &lt;title&gt;Web Font Sample&lt;/title&gt;
  &lt;style type="text/css" media="screen, print"&gt;
    @font-face {
      font-family: "Bitstream Vera Serif Bold";
      src: url("https://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
    }

    body { font-family: "Bitstream Vera Serif Bold", serif }
  &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
  This is Bitstream Vera Serif Bold.
&lt;/body&gt;
&lt;/html&gt;
</pre>



<p>在接下来的例子中，用到了用户本地字体"Helvetica Neue Bold"的备份；如果当前用户(浏览器)未安装该字体(两种可能的字体名都已经试过)，就会用下载的字体"MgOpenModernaBold.ttf"来代替：</p>

<pre class="brush: css notranslate">@font-face {
  font-family: MyHelvetica;
  src: local("Helvetica Neue Bold"),
  local("HelveticaNeue-Bold"),
  url(MgOpenModernaBold.ttf);
  font-weight: bold;
}
</pre>



<div class="note">
<p>接下来的例子在英文原文中已被删除。</p>
</div>

<p>这个例子新定义了一个字体，正常粗细的字采用字体Times New Roman，粗体字采用Consolas。</p>

<pre class="brush:css notranslate">@font-face {
    font-family: myFirstFont;
    src: local("Times New Roman");
    font-weight:normal;
}

@font-face {
    font-family: myFirstFont;
    src: local(Consolas);
    font-weight:bold;
}
</pre>

<h2 id="注意">注意</h2>

<ul>
 <li>这里使用的Web fonts 仍然受到同域限制  (字体文件必须和调用它的网页同一域), 但可以使用 <a href="https://developer.mozilla.org/en-US/docs/HTTP_access_control">HTTP access controls</a> 解除这一限制。</li>
 <li>因为这里没有为 TrueType(ttf), OpenType(otf) 和 Web Open File Format(WOFF) 字体定义MIME，因此不能为这些字体类型设置特定的MIME（实际上WOFF的MIME将会是application/font-woff，但浏览器对此MIME的识别还不统一，其它字体情况也类似，可暂时使用application/octet-stream）。 </li>
 <li>你不能在一个 CSS 选择器中定义 @font-face 。例如，这样写是无效的：
  <pre class="brush: css; example-bad notranslate">.className {
  @font-face {
    font-family: MyHelvetica;
    src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"),
        url(MgOpenModernaBold.ttf);
    font-weight: bold;
  }
}</pre>
 </li>
</ul>

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

<table>
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('WOFF2.0', '', 'WOFF2 font format')}}</td>
   <td>{{Spec2('WOFF2.0')}}</td>
   <td>Font format specification with new compression algorithm</td>
  </tr>
  <tr>
   <td>{{SpecName('WOFF1.0', '', 'WOFF font format')}}</td>
   <td>{{Spec2('WOFF1.0')}}</td>
   <td>Font format specification</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Fonts', '#font-face-rule', '@font-face')}}</td>
   <td>{{Spec2('CSS3 Fonts')}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

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

<p>{{Compat("css.at-rules.font-face")}}</p>

<h2 id="参考">参考</h2>

<ul>
 <li><a href="/en-US/docs/WOFF" title="About WOFF">About WOFF</a></li>
 <li><a class="external" href="http://www.fontsquirrel.com/fontface/generator">FontSquirrel @font-face generator</a></li>
 <li><a class="external" href="http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/">Beautiful fonts with @font-face</a></li>
 <li><a class="external" href="http://openfontlibrary.org/" title="http://openfontlibrary.org/">Open Font Library</a></li>
 <li><a class="external" href="http://msdn.microsoft.com/en-us/library/ms530757(VS.85).aspx">Microsoft Developer Network (MSDN) @font-face reference</a></li>
 <li><a class="external" href="http://caniuse.com/woff">When can I use WOFF?</a></li>
 <li><a class="external" href="http://caniuse.com/svg-fonts">When can I use SVG Fonts?</a></li>
</ul>