diff options
author | julieng <julien.gattelier@gmail.com> | 2021-09-17 20:58:15 +0200 |
---|---|---|
committer | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2021-10-12 07:57:33 +0200 |
commit | 149319bb8c7b1394a443f0877c3460cd362aa815 (patch) | |
tree | d534abb0cbc87d5e224836e9d6b888aa58564aa0 /files/fr/web/css/@font-face/font-stretch/index.html | |
parent | eb9de0363cb273b54d3f5402bbf4e3bc03c60971 (diff) | |
download | translated-content-149319bb8c7b1394a443f0877c3460cd362aa815.tar.gz translated-content-149319bb8c7b1394a443f0877c3460cd362aa815.tar.bz2 translated-content-149319bb8c7b1394a443f0877c3460cd362aa815.zip |
move *.html to *.md
Diffstat (limited to 'files/fr/web/css/@font-face/font-stretch/index.html')
-rw-r--r-- | files/fr/web/css/@font-face/font-stretch/index.html | 180 |
1 files changed, 0 insertions, 180 deletions
diff --git a/files/fr/web/css/@font-face/font-stretch/index.html b/files/fr/web/css/@font-face/font-stretch/index.html deleted file mode 100644 index 505de0c2ac..0000000000 --- a/files/fr/web/css/@font-face/font-stretch/index.html +++ /dev/null @@ -1,180 +0,0 @@ ---- -title: font-stretch -slug: Web/CSS/@font-face/font-stretch -tags: - - '@font-face' - - CSS - - Descripteur - - Reference -translation_of: Web/CSS/@font-face/font-stretch ---- -<p>{{CSSRef}}{{draft}}</p> - -<p>Le descripteur CSS <strong><code>font-stretch</code></strong> permet aux auteurs de choisir entre la forme normale, condensée ou étendue d'une police fournie dans une règle {{cssxref("@font-face")}}.</p> - -<p>Pour une police donnée, les auteurs peuvent télécharger différentes fontes pour différents styles et utiliser alors <code>font-stretch</code> de façon explicite afin de choisir la fonte voulue. Les valeurs fournies au descripteur CSS sont les mêmes que celles qui peuvent être utilisées pour la propriété correspondante.</p> - -<p>{{cssinfo}}</p> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="brush: css">/* Valeurs simples */ -font-stretch: ultra-condensed; -font-stretch: extra-condensed; -font-stretch: condensed; -font-stretch: semi-condensed; -font-stretch: normal; -font-stretch: semi-expanded; -font-stretch: expanded; -font-stretch: extra-expanded; -font-stretch: ultra-expanded; -font-stretch: 50%; -font-stretch: 100%; -font-stretch: 200%; - -/* Valeurs multiples */ -font-stretch: 75% 125%; -font-stretch: condensed ultra-condensed;; -</pre> - -<h3 id="Valeurs">Valeurs</h3> - -<dl> - <dt><code>normal</code></dt> - <dd>Indique la forme normale (en largeur) de la police.</dd> - <dt><code>semi-condensed</code>, <code>condensed</code>, <code>extra-condensed</code>, <code>ultra-condensed</code></dt> - <dd>Indique une forme plus condensée que la normale (la valeur <code>ultra-condensed</code> correspond à la forme la plus condensée).</dd> - <dt><code>semi-expanded</code>, <code>expanded</code>, <code>extra-expanded</code>, <code>ultra-expanded</code></dt> - <dd>Indique une forme plus étendue que la normale (la valeur <code>ultra-expanded</code> étant la plus étendue).</dd> - <dt><code><percentage></code></dt> - <dd>Un pourcentage (une valeur de type {{cssxref("<percentage>")}}) dont la valeur est comprise entre 50% et 200% (inclus). Les valeurs négatives ne sont pas autorisées pour cette propriété.</dd> -</dl> - -<p>Dans les versions antérieures de la spécification pour <code>font-stretch</code>, la propriété ne s'utilisait qu'avec des mots-clés. Avec le module CSS Fonts de niveau 4, la syntaxe est étendue afin de permettre l'utilisation des valeurs <code><percentage></code>. Cela permet aux polices variables de permettre un contrôle plus fin voire continu.</p> - -<p>Pour les polices variables TrueType et OpenType, c'est l'axe de variation <code>"wdth"</code> qui est utilisé afin d'implémenter les largeurs variables.</p> - -<p>Si la police ne dispose pas d'une fonte avec une valeur exactement correspondantes, le moteur choisira la forme la plus proche disponible.</p> - -<h3 id="Correspondance_entre_les_noms_et_les_pourcentages">Correspondance entre les noms et les pourcentages</h3> - -<p>Ce tableau indique les correspondances entre les valeurs indiquées par un mot-clé et celles définies avec un pourcentage :</p> - -<table class="fullwidth-table standard-table"> - <thead> - <tr> - <th scope="col">Keyword</th> - <th scope="col">Pourcentage</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>ultra-condensed</code></td> - <td>50%</td> - </tr> - <tr> - <td><code>extra-condensed</code></td> - <td>62.5%</td> - </tr> - <tr> - <td><code>condensed</code></td> - <td>75%</td> - </tr> - <tr> - <td><code>semi-condensed</code></td> - <td>87.5%</td> - </tr> - <tr> - <td><code>normal</code></td> - <td>100%</td> - </tr> - <tr> - <td><code>semi-expanded</code></td> - <td>112.5%</td> - </tr> - <tr> - <td><code>expanded</code></td> - <td>125%</td> - </tr> - <tr> - <td><code>extra-expanded</code></td> - <td>150%</td> - </tr> - <tr> - <td><code>ultra-expanded</code></td> - <td>200%</td> - </tr> - </tbody> -</table> - -<h3 id="Polices_variables">Polices variables</h3> - -<p>La plupart des polices disposent de fontes avec des formes "séparées"/"discrètes". Toutefois, les polices variables permettent désormais d'utiliser des variations beaucoup plus fines (et c'est pour cela qu'on utilise les pourcentages).</p> - -<p>Pour les polices variables TrueType ou OpenType, c'est l'axe de variation <code>"wdth"</code> qui est utilisé afin d'implémenter les largeurs variables des glyphes.</p> - -<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> - -{{csssyntax}} - -<h2 id="Exemples">Exemples</h2> - -<p>Dans l'exemple suivant, on charge une police Open Sans locale et on l'importe en ciblant les fontes avec les formes normale, semi-condensée et semi-étendue.</p> - -<pre class="brush: css">@font-face { - font-family: "Open Sans"; - src: local("Open Sans") format("woff2"), - url("/fonts/OpenSans-Regular-webfont.woff") format("woff"); - font-stretch: 87.5% 112.5%; -}</pre> - -<h2 id="Accessibilité">Accessibilité</h2> - -<p>Les personnes atteintes de dyslexie ou d'autres troubles cognitifs pourront avoir des difficultés à lire des textes dont la fonte est trop condensée, notamment <a href="/en-US/docs/Web/CSS/color#accessibility_concerns">si le contraste des couleurs est trop faible</a>.</p> - -<ul> - <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Comprendre les règles WCAG - Partie 1.4 (MDN)</a></li> - <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html" rel="noopener">Respecter le critère 1.4.8 - Comprendre les règles WCAG 2.0 (W3C)</a></li> -</ul> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS4 Fonts', '#font-prop-desc', 'font-stretch')}}</td> - <td>{{Spec2('CSS4 Fonts')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('CSS3 Fonts', '#font-prop-desc', 'font-stretch')}}</td> - <td>{{Spec2('CSS3 Fonts')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("css.at-rules.font-face.font-stretch")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{cssxref("@font-face/font-display", "font-display descriptor")}}</li> - <li>{{cssxref("@font-face/font-family", "font-family descriptor")}}</li> - <li>{{cssxref("@font-face/font-weight", "font-weight descriptor")}}</li> - <li>{{cssxref("@font-face/font-style", "font-style descriptor")}}</li> - <li>{{cssxref("@font-face/font-variant", "font-variant descriptor")}}</li> - <li>{{cssxref("font-feature-settings", "font-feature-settings")}}</li> - <li>{{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}</li> - <li>{{cssxref("@font-face/src", "src")}}</li> - <li>{{cssxref("@font-face/unicode-range", "unicode-range descriptor")}}</li> -</ul> |