font-feature-settings

  • Raccourci de la révision : CSS/font-feature-settings
  • Titre de la révision : font-feature-settings
  • ID de la révision : 355025
  • Créé :
  • Créateur : FredB
  • Version actuelle ? Non
  • Commentaire

Contenu de la révision

{{ CSSRef() }}

{{ SeeCompatTable()}}

Résumé

La propriété CSS font-feature-settings permet un contrôle des fonctions typographiques avancées des fontes OpenType.

Note : il est conseillé aux auteurs d'utiliser la propriété {{ cssxref("font-variant") }} dès et autant que possible. Cette propriété a été conçue pour manier les cas spéciaux lorsqu'aucune autre manière d'activer ou d'accéder aux fonctions des fontes OpenType n'est disponible.

En particulier, cette propriété CSS ne doit pas être utilisée pour activer les petites capitales.
  • {{ Xref_cssinitial() }} {{ Cssxref("normal") }}
  • S'applique à tous les éléments
  • {{ Xref_cssinherited() }} oui
  • Média {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }} comme spécifiée

Syntaxe

font-feature-settings : normal | <feature-tag-value> [, <feature-tag-value>]*

<feature-tag-value> est <chaîne> [ <entier> | on | off ]?.

normal
Le texte est affiché selon les réglages par défaut.
<feature-tag-value>
Lorsque le texte est affiché, la liste des étiquettes de fonctions OpenType est envoyée au moteur de rendu du texte pour activer ou désactiver les fonctions des fontes. Une étiquette est toujours une {{ xref_cssstring() }} de 4 caractères ASCII. Si elle compte plus ou moins de caractères, ou des caractères en dehors de l'ensemble délimité par U+20 et U+7E, la propriété est invalide.
La valeur est un entier positif. Les deux mots clés on et off sont des synonymes pour 1 et 0 respectivement. Si aucune valeur n'est définie, la valeur par défaut est 1. Pour les fonctions OpenType non booléennes (p. ex. alternatives stylistiques), la valeur implique qu'un glyphe particulier soit sélectionné ; pour les valeur booléennes, c'est une permutation.

Exemples

/* utilise les glyphes alternatifs de petites capitales */
.smallcaps { font-feature-settings: "smcp" on; }

/* convertit les capitales et minuscules en petites capitales (affecte aussi la ponctuation) */
.allsmallcaps { font-feature-settings: "c2sc", "smcp"; }

/* active les formes historiques */
.hist { font-feature-settings: "hist"; }

/* désactive les ligatures courantes, habituellement actives par défaut */
.noligs { font-feature-settings: "liga" 0; }

/* active les chiffres tabulés (à chasse fixe) */
td.tabular { font-feature-settings: "tnum"; }

/* active les fractions automatiques */
.fractions { font-feature-settings: "frac"; }

/* utilise le second caractère « swash » disponible */
.swash { font-feature-settings: "swsh" 2; }

/* active l'ensemble stylistique 7 */
.fancystyle {
  font-family: Gabriola; /* available on Windows 7, and on Mac OS */
  font-feature-settings: "ss07";
}

Spécificat​ions

Spécification État Commentaire
{{ SpecName('CSS3 Fonts', '#propdef-font-feature-settings', 'font-feature-settings') }} {{ Spec2('CSS3 Fonts') }}  

Compatibilité des navigateurs

{{ CompatibilityTable() }}

Fonction Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Support de base 16.0 (voir note){{ property_prefix("-webkit") }} 4.0 (2.0) (voir note){{ property_prefix("-moz") }} 10.0 {{ CompatNo() }} {{ CompatNo() }}
Fonction Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support de base {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

Voir également

Source de la révision

<p>{{ CSSRef() }}</p>
<p>{{ SeeCompatTable()}}</p>
<h2 id="R.C3.A9sum.C3.A9">Résumé</h2>
<p>La propriété <a href="/fr/docs/CSS" title="/fr/docs/CSS">CSS</a> <code>font-feature-settings</code> permet un contrôle des fonctions typographiques avancées des fontes OpenType.</p>
<div class="note">
  <strong>Note :</strong> il est conseillé aux auteurs d'utiliser la propriété {{ cssxref("font-variant") }} dès et autant que possible. Cette propriété a été conçue pour manier les cas spéciaux lorsqu'aucune autre manière d'activer ou d'accéder aux fonctions des fontes OpenType n'est disponible.<br />
  <br />
  En particulier, cette propriété CSS ne doit pas être utilisée pour activer les petites capitales.</div>
<ul class="cssprop">
  <li><dfn>{{ Xref_cssinitial() }} </dfn> {{ Cssxref("normal") }}</li>
  <li><dfn>S'applique à </dfn> tous les éléments</li>
  <li><dfn>{{ Xref_cssinherited() }} </dfn> oui</li>
  <li><dfn>Média </dfn> {{ Xref_cssvisual() }}</li>
  <li><dfn>{{ Xref_csscomputed() }} </dfn>comme spécifiée</li>
</ul>
<h2 id="Syntaxe">Syntaxe</h2>
<pre>
font-feature-settings : normal | &lt;feature-tag-value&gt; [, &lt;feature-tag-value&gt;]*
</pre>
<p><code>où </code><code>&lt;feature-tag-value&gt;</code> est <code>&lt;chaîne&gt; [ &lt;entier&gt; | on | off ]?</code>.</p>
<dl>
  <dt>
    normal</dt>
  <dd>
    Le texte est affiché selon les réglages par défaut.</dd>
  <dt>
    <code>&lt;feature-tag-value&gt;</code></dt>
  <dd>
    Lorsque le texte est affiché, la liste des étiquettes de fonctions OpenType est envoyée au moteur de rendu du texte pour activer ou désactiver les fonctions des fontes. Une étiquette est toujours une {{ xref_cssstring() }} de 4 caractères ASCII. Si elle compte plus ou moins de caractères, ou des caractères en dehors de l'ensemble délimité par U+20 et U+7E, la propriété est invalide.<br />
    La valeur est un entier positif. Les deux mots clés <code>on</code> et <code>off</code> sont des synonymes pour <code>1</code> et <code>0</code> respectivement. Si aucune valeur n'est définie, la valeur par défaut est <code>1</code>. Pour les fonctions OpenType non booléennes (p. ex. <a class="external" href="http://www.microsoft.com/typography/otspec/features_pt.htm#salt" lang="en" title="http://www.microsoft.com/typography/otspec/features_pt.htm#salt">alternatives stylistiques</a>), la valeur implique qu'un glyphe particulier soit sélectionné ; pour les valeur booléennes, c'est une permutation.</dd>
</dl>
<h2 id="Exemples">Exemples</h2>
<pre class="brush:css">
/* utilise les glyphes alternatifs de petites capitales */
.smallcaps { font-feature-settings: "smcp" on; }

/* convertit les capitales et minuscules en petites capitales (affecte aussi la ponctuation) */
.allsmallcaps { font-feature-settings: "c2sc", "smcp"; }

/* active les formes historiques */
.hist { font-feature-settings: "hist"; }

/* désactive les ligatures courantes, habituellement actives par défaut */
.noligs { font-feature-settings: "liga" 0; }

/* active les chiffres tabulés (à chasse fixe) */
td.tabular { font-feature-settings: "tnum"; }

/* active les fractions automatiques */
.fractions { font-feature-settings: "frac"; }

/* utilise le second caractère « swash » disponible */
.swash { font-feature-settings: "swsh" 2; }

/* active l'ensemble stylistique 7 */
.fancystyle {
  font-family: Gabriola; /* available on Windows 7, and on Mac OS */
  font-feature-settings: "ss07";
}
</pre>
<h2 id="Sp.C3.A9cificat.E2.80.8Bions">Spécificat​ions</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Spécification</th>
      <th scope="col">État</th>
      <th scope="col">Commentaire</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{ SpecName('CSS3 Fonts', '#propdef-font-feature-settings', 'font-feature-settings') }}</td>
      <td>{{ Spec2('CSS3 Fonts') }}</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<h2 id="Compatibilit.C3.A9_des_navigateurs">Compatibilité des navigateurs</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Fonction</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari (WebKit)</th>
      </tr>
      <tr>
        <td>Support de base</td>
        <td>16.0 (voir <a href="/en/CSS/font-feature-settings#B2" title="https://developer.mozilla.org/en/CSS/font-feature-settings#B2">note</a>){{ property_prefix("-webkit") }}</td>
        <td>4.0 (2.0) (voir <a href="/en/CSS/font-feature-settings#B1" title="https://developer.mozilla.org/en/CSS/font-feature-settings#B1">note</a>){{ property_prefix("-moz") }}</td>
        <td>10.0</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Fonction</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Support de base</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="Voir_.C3.A9galement">Voir également</h2>
<ul>
  <li><a class="external" href="http://www.fontfont.com/opentype/FF_OT_UserGuide_v2.pdf" title="http://www.fontfont.com/opentype/FF_OT_UserGuide_v2.pdf">Guide de l'utilisateur OpenType par FontFont (en) (pdf)</a></li>
  <li><a class="external" href="http://www.microsoft.com/typography/otspec/featurelist.htm" title="http://www.microsoft.com/typography/otspec/featurelist.htm">Liste des étiquettes de fonctions OpenType</a></li>
  <li><a class="external" href="http://blogs.msdn.com/b/ie/archive/2012/01/09/css-corner-using-the-whole-font.aspx" title="http://blogs.msdn.com/b/ie/archive/2012/01/09/css-corner-using-the-whole-font.aspx">Utiliser toute la fonte</a> (la syntaxe -moz est l'ancienne. Avec Gecko, utilisez la syntaxe de -ms, mais avec le préfixe -moz).</li>
</ul>
Revenir à cette révision