---
title: font-face
slug: Web/SVG/Element/font-face
tags:
  - SVG字体
translation_of: Web/SVG/Element/font-face
---
<div>{{SVGRef}}</div>

<p>font-face元素相当于(corresponds to )CSS的@font-face规则声明，font-face元素定义了一个字体的外部属性(a font's outer properties)。</p>

<h2 id="使用上下文">使用上下文 </h2>

<p>{{svginfo}}</p>

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

<h2 id="属性Attributes">属性Attributes</h2>

<h3 id="全局属性Global_attributes">全局属性Global attributes</h3>

<ul>
 <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">Core attributes</a> »</li>
</ul>

<h3 id="特定属性Specific_attributes">特定属性Specific attributes</h3>

<ul>
 <li>{{ SVGAttr("font-family") }}</li>
 <li>{{ SVGAttr("font-style") }}</li>
 <li>{{ SVGAttr("font-variant") }}</li>
 <li>{{ SVGAttr("font-weight") }}</li>
 <li>{{ SVGAttr("font-stretch") }}</li>
 <li>{{ SVGAttr("font-size") }}</li>
 <li>{{ SVGAttr("unicode-range") }}</li>
 <li>{{ SVGAttr("units-per-em") }}</li>
 <li>{{ SVGAttr("panose-1") }}</li>
 <li>{{ SVGAttr("stemv") }}</li>
 <li>{{ SVGAttr("stemh") }}</li>
 <li>{{ SVGAttr("slope") }}</li>
 <li>{{ SVGAttr("cap-height") }}</li>
 <li>{{ SVGAttr("x-height") }}</li>
 <li>{{ SVGAttr("accent-height") }}</li>
 <li>{{ SVGAttr("ascent") }}</li>
 <li>{{ SVGAttr("descent") }}</li>
 <li>{{ SVGAttr("widths") }}</li>
 <li>{{ SVGAttr("bbox") }}</li>
 <li>{{ SVGAttr("ideographic") }}</li>
 <li>{{ SVGAttr("alphabetic") }}</li>
 <li>{{ SVGAttr("mathematical") }}</li>
 <li>{{ SVGAttr("hanging") }}</li>
 <li>{{ SVGAttr("v-ideographic") }}</li>
 <li>{{ SVGAttr("v-alphabetic") }}</li>
 <li>{{ SVGAttr("v-mathematical") }}</li>
 <li>{{ SVGAttr("v-hanging") }}</li>
 <li>{{ SVGAttr("underline-position") }}</li>
 <li>{{ SVGAttr("underline-thickness") }}</li>
 <li>{{ SVGAttr("strikethrough-position") }}</li>
 <li>{{ SVGAttr("strikethrough-thickness") }}</li>
 <li>{{ SVGAttr("overline-position") }}</li>
 <li>{{ SVGAttr("overline-thickness") }}</li>
</ul>

<h2 id="DOM_接口">DOM 接口</h2>

<p>这个元素实现了 <code><a href="/en/DOM/SVGFontFaceElement" title="en/DOM/SVGFontFaceElement">SVGFontFaceElement</a></code> 接口。</p>

<h2 id="另见">另见</h2>

<ul>
 <li>{{ SVGElement("font") }}</li>
 <li>{{ SVGElement("font-face-src") }}</li>
 <li><a href="/en/SVG/Tutorial/SVG_fonts" title="en/SVG/Tutorial/SVG_Fonts">SVG tutorial: SVG fonts</a></li>
</ul>