mozilla

Revision 19338 of @font-face

  • Revision slug: CSS/@font-face
  • Revision title: @font-face
  • Revision id: 19338
  • Created:
  • Creator: Fredchat
  • Is current revision? No
  • Comment adding fr

Revision Content

{{template.CSSRef()}}

Summary

@font-face provides an @rule to specify a webfont that need to be download to render the web page as expected by the page author. Mozilla has not yet implemented this feature.

Syntax

@font-face {
  font-family: <a-remote-font-name>;
  src: {{template.Xref_cssuri()}};
}

Values

<a-remote-font-name> 
specify a font name that will be used as font face value for font properties.
<uri> 
URL for the remote font file location.

Examples

{{template.CSSRefExampleLink("at-font-face")}}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
  <head>
    <title>Dynamic Font Testing</title>
    <style type="text/css" media="screen, print">
      @font-face {
        font-family: "Moz Serif";
        src: url("http://mytestsite.example.com/fonts/moz_serif_font_file.ext")
      }
      body { font-family: "Moz Serif", serif }
    </style>
  </head>
  <body>
    <h1>Dynamic Font Testing</h1>
    <p>
        This is a test page for CSS 2 rule @font-face.
        This text should appear in "Moz Serif" font.
    </p>
  </body>
</html>

Notes

Status for the enhancement request for @font-face implementation in Mozilla can be found at {{template.Bug(70132)}}.

Specifications

Browser compatibility

(Sample Compatibility Chart)

Browser Lowest Version
Internet Explorer ?
Firefox ?
Netscape ?
Opera ?

See also

{{wiki.template('CSS_Reference:Fonts')}}

{{ wiki.languages( { "fr": "fr/CSS/@font-face" } ) }}

Revision Source

<p> 
{{template.CSSRef()}}
</p>
<h3 name="Summary"> Summary </h3>
<p><b>@font-face</b> provides an @rule to specify a webfont that need to be download to render the web page as expected by the page author. Mozilla has not yet implemented this feature.
</p>
<h3 name="Syntax"> Syntax </h3>
<pre class="eval">@font-face {
  font-family: &lt;a-remote-font-name&gt;;
  src: {{template.Xref_cssuri()}};
}
</pre>
<h3 name="Values"> Values </h3>
<dl><dt>&lt;a-remote-font-name&gt; </dt><dd> specify a font name that will be used as font face value for font properties.
</dd><dt>&lt;uri&gt; </dt><dd> URL for the remote font file location.
</dd></dl>
<h3 name="Examples"> Examples </h3>
<p>{{template.CSSRefExampleLink("at-font-face")}}
</p>
<pre>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Dynamic Font Testing&lt;/title&gt;
    &lt;style type="text/css" media="screen, print"&gt;
      @font-face {
        font-family: "Moz Serif";
        src: url("http://mytestsite.example.com/fonts/moz_serif_font_file.ext")
      }
      body { font-family: "Moz Serif", serif }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h1&gt;Dynamic Font Testing&lt;/h1&gt;
    &lt;p&gt;
        This is a test page for CSS 2 rule @font-face.
        This text should appear in "Moz Serif" font.
    &lt;/p&gt;
  &lt;/body&gt;
&lt;/html&gt;
</pre>
<h3 name="Notes"> Notes </h3>
<p>Status for the enhancement request for @font-face implementation in Mozilla can be found at {{template.Bug(70132)}}.
</p>
<h3 name="Specifications"> Specifications </h3>
<ul><li> <a class="external" href="http://www.w3.org/TR/REC-CSS2/fonts.html#font-descriptions">CSS 2 fonts</a>
</li><li> <a class="external" href="http://www.w3.org/TR/css3-webfonts/#font-descriptions">CSS 3 webfonts</a>
</li></ul>
<h3 name="Browser_compatibility"> Browser compatibility </h3>
<p>(Sample Compatibility Chart)
</p>
<table class="standard-table">
  <tbody><tr>
    <th>Browser</th>
    <th>Lowest Version</th>
  </tr>
  <tr>
    <td>Internet Explorer</td>
    <td>?</td>
  </tr>
  <tr>
    <td>Firefox</td>
    <td>?</td>
  </tr>
  <tr>
    <td>Netscape</td>
    <td>?</td>
  </tr>
  <tr>
    <td>Opera</td>
    <td>?</td>
  </tr>
</tbody></table>
<h3 name="See_also"> See also </h3>
<p>{{wiki.template('CSS_Reference:Fonts')}}
</p>{{ wiki.languages( { "fr": "fr/CSS/@font-face" } ) }}
Revert to this revision