mozilla

Revision 502585 of font-face

  • Revision slug: Web/SVG/Element/font-face
  • Revision title: font-face
  • Revision id: 502585
  • Created:
  • Creator: kscarfone
  • Is current revision? Yes
  • Comment Added SVG tags and {{SVGRef}}

Revision Content

{{ SVGRefElem() }}

The font-face element corresponds to the CSS @font-face declaration. It defines a font's outer properties.

Usage context

Categories Font element
Permitted content Any number of descriptive elements » and at most one {{ SVGElement("font-face") }} element, in any order.
Normative document SVG 1.1 (2nd Edition)

Example

Attributes

Global attributes

Specific attributes

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

DOM Interface

This element implements the SVGFontFaceElement interface.

See also

{{SVGRef}}

Revision Source

<p>{{ SVGRefElem() }}</p>
<p>The <code>font-face</code> element corresponds to the CSS @font-face declaration. It defines a font's outer properties.</p>
<h2 id="Usage_context">Usage context</h2>
<table class="standard-table">
 <tbody>
  <tr>
   <th scope="row">Categories</th>
   <td>Font element</td>
  </tr>
  <tr>
   <th scope="row">Permitted content</th>
   <td>Any number of <a href="/en/SVG/Element#Descriptive" title="en/SVG/Attribute#Descriptive">descriptive elements</a>&nbsp;» and at most one {{ SVGElement("font-face") }} element, in any order.</td>
  </tr>
  <tr>
   <th scope="row">Normative document</th>
   <td><a class="external" href="http://www.w3.org/TR/SVG/fonts.html#FontFaceElement" title="http://www.w3.org/TR/SVG/fonts.html#FontFaceElement">SVG 1.1 (2nd Edition)</a></td>
  </tr>
 </tbody>
</table>
<h2 id="Example">Example</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>&nbsp;»</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.C2.A0Interface">DOM&nbsp;Interface</h2>
<p>This element implements the <code><a href="/en/DOM/SVGFontFaceElement" title="en/DOM/SVGFontFaceElement">SVGFontFaceElement</a></code> interface.</p>
<h2 id="See_also">See also</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>
<p>{{SVGRef}}</p>
Revert to this revision