@font-face

  • Raccourci de la révision : CSS/@font-face
  • Titre de la révision : @font-face
  • ID de la révision : 132823
  • Créé :
  • Créateur : Valacar
  • Version actuelle ? Non
  • Commentaire /* Valeurs */

Contenu de la révision

{{wiki.template('Traduction_à_relire')}} {{template.CSSRef()}}

Résumé

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

Syntaxe

@font-face {
  font-family: <nom-de-police-distante>;
  src: {{template.Cssxref("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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<
  <head>
    <title>Test dynamique d'une fonte</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>
    <Test d'une fonte</h1>
    <p>
        Ceci est une page de test pour la règle CSS 2 @font-face.
        Ce texte doit s'afficher avec la fonte "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é à {{template.Bug(70132)}}.

Spécifications

Compatibilité des navigateur

Navigateur Version minimale
Internet Explorer 4.0(incomplet)
Firefox Non
Netscape 4.0(incomplet)
Opera Non
Webkit Non

Voir également

{{wiki.template('Référence_CSS:Fonts')}}

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

Source de la révision

<p> 
{{wiki.template('Traduction_à_relire')}}
{{template.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, qui nécessite un téléchargement, afin d'afficher la page telle que souhaitée par l'auteur. Mozilla n'a pas encore implémenté cette fonction.
</p>
<h3 name="Syntaxe"> Syntaxe </h3>
<pre class="eval">@font-face {
  font-family: &lt;nom-de-police-distante&gt;;
  src: {{template.Cssxref("uri", "&lt;uri&gt;")}};
}
</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>{{template.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 fonte&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;Test d'une fonte&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 fonte "Moz Serif".
    &lt;/p&gt;
  &lt;/body&gt;
&lt;/html&gt;
</pre>
<p><br>
</p>
<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é à {{template.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>4.0(incomplet)</td>
  </tr>
  <tr>
    <td>Firefox</td>
    <td>Non</td>
  </tr>
  <tr>
    <td>Netscape</td>
    <td>4.0(incomplet)</td>
  </tr>
  <tr>
    <td>Opera</td>
    <td>Non</td>
  </tr>
  <tr>
    <td>Webkit</td>
    <td>Non</td>
  </tr>
</tbody></table>
<h3 name="Voir_.C3.A9galement"> Voir également </h3>
<p>{{wiki.template('Référence_CSS:Fonts')}}
</p>{{ wiki.languages( { "en": "en/CSS/@font-face" } ) }}
Revenir à cette révision