aboutsummaryrefslogtreecommitdiff
path: root/files/fr/web/css/@font-face/font-stretch/index.html
diff options
context:
space:
mode:
authorjulieng <julien.gattelier@gmail.com>2021-09-17 20:58:15 +0200
committerSphinxKnight <SphinxKnight@users.noreply.github.com>2021-10-12 07:57:33 +0200
commit149319bb8c7b1394a443f0877c3460cd362aa815 (patch)
treed534abb0cbc87d5e224836e9d6b888aa58564aa0 /files/fr/web/css/@font-face/font-stretch/index.html
parenteb9de0363cb273b54d3f5402bbf4e3bc03c60971 (diff)
downloadtranslated-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.html180
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>&lt;percentage&gt;</code></dt>
- <dd>Un pourcentage (une valeur de type {{cssxref("&lt;percentage&gt;")}}) 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>&lt;percentage&gt;</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>