@font-face

  • Raccourci de la révision : CSS/@font-face
  • Titre de la révision : @font-face
  • ID de la révision : 132828
  • Créé :
  • Créateur : Fredchat
  • Version actuelle ? Non
  • Commentaire

Contenu de la révision

{{ CSSRef() }}

Résumé

@font-face est une @règle qui permet de spécifier une police de caractères à télécharger, afin d'afficher la page telle que souhaitée par l'auteur. Mozilla n'a pas encore implémenté cette régle.

Syntaxe

@font-face {
  font-family: <nom-de-police-distante>;
  src: {{ Cssxref("uri", "<uri>") }}</uri>;
}

Valeurs

<nom-de-police-distante> 
spécifie le nom d'une police de caractères qui sera utilisée comme une valeur font-face pour les propriétés des polices.
<uri> 
URL du fichier de police de caractères.

Exemples

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<
  <head>
    <title>Test dynamique d'une police</title>
    <style type="text/css" media="screen, print">
      @font-face {
        font-family: "Moz Serif";
        src: url("http://mytestsite.example.com/fonts/..._font_file.ext")
      }
      body { font-family: "Moz Serif", serif }
    </style>
  </head>
  <body>
    <Test d'une police</h1>
    <p>
        Ceci est une page de test pour la règle CSS 2 @font-face.
        Ce texte doit s'afficher avec la police "Moz Serif".
    </p>
  </body>
</html>

Notes

Le suivi de la demande d'implémentation de la règle @font-face dans Mozilla peut être consulté à {{ Bug("70132") }}.

Spécifications

Compatibilité des navigateur

Navigateur Version minimale
Internet Explorer ?
Firefox ?
Netscape ?
Opera ?
Webkit ?

Voir également

{{ Référence_CSS:Fonts() }}

{{ languages( { "en": "en/CSS/@font-face" } ) }}

Source de la révision

<p> {{ CSSRef() }}
</p>
<h3 name="R.C3.A9sum.C3.A9"> Résumé </h3>
<p><code>@font-face</code> est une @règle qui permet de spécifier une police de caractères à télécharger, afin d'afficher la page telle que souhaitée par l'auteur. Mozilla n'a pas encore implémenté cette régle.
</p>
<h3 name="Syntaxe"> Syntaxe </h3>
<pre class="eval">@font-face {
  font-family: &lt;nom-de-police-distante&gt;;
  src: {{ Cssxref("uri", "<uri>") }}</uri>;
}
</pre>
<h3 name="Valeurs"> Valeurs </h3>
<dl><dt>&lt;nom-de-police-distante&gt; </dt><dd> spécifie le nom d'une police de caractères qui sera utilisée comme une valeur font-face pour les propriétés des polices.
</dd><dt>&lt;uri&gt; </dt><dd> URL du fichier de police de caractères.
</dd></dl>
<h3 name="Exemples"> Exemples </h3>
<p>{{ CSSRefExampleLink("at-font-face") }}
</p>
<pre class="eval">&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"&gt;
&lt;
  &lt;head&gt;
    &lt;title&gt;Test dynamique d'une police&lt;/title&gt;
    &lt;style type="text/css" media="screen, print"&gt;
      @font-face {
        font-family: "Moz Serif";
        src: url("<a class=" external" href="http://mytestsite.example.com/fonts/moz_serif_font_file.ext" rel="freelink">http://mytestsite.example.com/fonts/..._font_file.ext</a>")
      }
      body { font-family: "Moz Serif", serif }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;Test d'une police&lt;/h1&gt;
    &lt;p&gt;
        Ceci est une page de test pour la règle CSS 2 @font-face.
        Ce texte doit s'afficher avec la police "Moz Serif".
    &lt;/p&gt;
  &lt;/body&gt;
&lt;/html&gt;
</pre>
<h3 name="Notes"> Notes </h3>
<p>Le suivi de la demande d'implémentation de la règle <code>@font-face</code> dans Mozilla peut être consulté à {{ Bug("70132") }}.
</p>
<h3 name="Sp.C3.A9cifications"> Spécifications </h3>
<ul><li> <a class="external" href="http://www.yoyodesign.org/doc/w3c/css2/fonts.html#font-descriptions">CSS 2 Les descriptions des polices et @font-face (fr)</a> <small>(non normative)</small>
</li><li> <a class="external" href="http://www.w3.org/TR/REC-CSS2/fonts.html#font-descriptions">CSS 2 fonts (en)</a>
</li><li> <a class="external" href="http://www.w3.org/TR/css3-webfonts/#font-descriptions">CSS 3 webfonts (en)</a>
</li></ul>
<h3 name="Compatibilit.C3.A9_des_navigateur"> Compatibilité des navigateur </h3>
<table class="standard-table"> <tbody><tr> <th>Navigateur</th> <th>Version minimale</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> <tr> <td>Webkit</td> <td>?</td> </tr>
</tbody></table>
<h3 name="Voir_.C3.A9galement"> Voir également </h3>
<p>{{ Référence_CSS:Fonts() }}
</p>{{ languages( { "en": "en/CSS/@font-face" } ) }}
Revenir à cette révision