diff options
Diffstat (limited to 'files/fr/web/css/font-stretch/index.html')
| -rw-r--r-- | files/fr/web/css/font-stretch/index.html | 52 |
1 files changed, 25 insertions, 27 deletions
diff --git a/files/fr/web/css/font-stretch/index.html b/files/fr/web/css/font-stretch/index.html index 67e6c59bed..12889ebfbd 100644 --- a/files/fr/web/css/font-stretch/index.html +++ b/files/fr/web/css/font-stretch/index.html @@ -11,7 +11,7 @@ translation_of: Web/CSS/font-stretch <p>La propriété <strong><code>font-stretch</code></strong> permet de choisir entre la forme normale, condensée ou étendue d'une police.</p> -<pre class="brush:css no-line-numbers notranslate">/* Valeurs avec un mot-clé */ +<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */ font-stretch: ultra-condensed; font-stretch: extra-condensed; font-stretch: condensed; @@ -135,34 +135,34 @@ font-stretch: unset; <tbody> <tr> <th scope="row">Helvetica Neue</th> - <td><img alt="" src="https://mdn.mozillademos.org/files/16039/Screenshot_2018-06-06_example_page.png" style="height: 59px; width: 45px;"></td> - <td><img alt="" src="https://mdn.mozillademos.org/files/16039/Screenshot_2018-06-06_example_page.png" style="height: 59px; width: 45px;"></td> - <td><img alt="" src="https://mdn.mozillademos.org/files/16039/Screenshot_2018-06-06_example_page.png" style="height: 59px; width: 45px;"></td> - <td><img alt="" src="https://mdn.mozillademos.org/files/16039/Screenshot_2018-06-06_example_page.png" style="height: 59px; width: 45px;"></td> - <td><img alt="" src="https://mdn.mozillademos.org/files/16040/Screenshot_2018-06-06_example_page1.png" style="height: 58px; width: 45px;"></td> - <td><img alt="" src="https://mdn.mozillademos.org/files/16040/Screenshot_2018-06-06_example_page1.png" style="height: 58px; width: 45px;"></td> - <td><img alt="" src="https://mdn.mozillademos.org/files/16040/Screenshot_2018-06-06_example_page1.png" style="height: 58px; width: 45px;"></td> - <td><img alt="" src="https://mdn.mozillademos.org/files/16040/Screenshot_2018-06-06_example_page1.png" style="height: 58px; width: 45px;"></td> - <td><img alt="" src="https://mdn.mozillademos.org/files/16040/Screenshot_2018-06-06_example_page1.png" style="height: 58px; width: 45px;"></td> + <td><img alt="" src="screenshot_2018-06-06_example_page.png"></td> + <td><img alt="" src="screenshot_2018-06-06_example_page.png"></td> + <td><img alt="" src="screenshot_2018-06-06_example_page.png"></td> + <td><img alt="" src="screenshot_2018-06-06_example_page.png"></td> + <td><img alt="" src="screenshot_2018-06-06_example_page1.png"></td> + <td><img alt="" src="screenshot_2018-06-06_example_page1.png"></td> + <td><img alt="" src="screenshot_2018-06-06_example_page1.png"></td> + <td><img alt="" src="screenshot_2018-06-06_example_page1.png"></td> + <td><img alt="" src="screenshot_2018-06-06_example_page1.png"></td> </tr> <tr> <th scope="row">League Mono Variable</th> - <td><img alt="" src="https://mdn.mozillademos.org/files/16030/Screenshot_2018-06-06_example_page.png" style="height: 58px; width: 45px;"></td> - <td><img alt="" src="https://mdn.mozillademos.org/files/16031/Screenshot_2018-06-06_example_page1.png" style="height: 58px; width: 45px;"></td> - <td><img alt="" src="https://mdn.mozillademos.org/files/16032/Screenshot_2018-06-06_example_page2.png" style="height: 58px; width: 45px;"></td> - <td><img alt="" src="https://mdn.mozillademos.org/files/16033/Screenshot_2018-06-06_example_page3.png" style="height: 58px; width: 45px;"></td> - <td><img alt="" src="https://mdn.mozillademos.org/files/16034/l-100.png" style="height: 58px; width: 45px;"></td> - <td><img alt="" src="https://mdn.mozillademos.org/files/16035/l-112.5.png" style="height: 58px; width: 45px;"></td> - <td><img alt="" src="https://mdn.mozillademos.org/files/16036/l-125.png" style="height: 58px; width: 45px;"></td> - <td><img alt="" src="https://mdn.mozillademos.org/files/16037/l-150.png" style="height: 58px; width: 45px;"></td> - <td><img alt="" src="https://mdn.mozillademos.org/files/16038/l-200.png" style="height: 58px; width: 45px;"></td> + <td><img alt="" src="screenshot_2018-06-06_example_page.png"></td> + <td><img alt="" src="screenshot_2018-06-06_example_page1.png"></td> + <td><img alt="" src="screenshot_2018-06-06_example_page2.png"></td> + <td><img alt="" src="screenshot_2018-06-06_example_page3.png"></td> + <td><img alt="" src="l-100.png"></td> + <td><img alt="" src="l-112.5.png"></td> + <td><img alt="" src="l-125.png"></td> + <td><img alt="" src="l-150.png"></td> + <td><img alt="" src="l-200.png"></td> </tr> </tbody> </table> <ul> <li>Helvetica Neue est installée par défaut sur macOS et possède une seule fonte condensée en plus de la fonte normale. On voit dans ce tableau que les valeurs de <code>font-stretch</code> inférieures à 100% utilisent une fonte condensée alors que les autres valeurs utilisent la fonte normale.</li> - <li><a href="http://tylerfinck.com/leaguemonovariable/">League Mono Variable</a> est une police variable qui offre plusieurs variantes de fontes sur cet axe et on peut alors observer les variations de <code>font-stretch</code> selon les pourcentages choisis.</li> + <li><a href="https://tylerfinck.com/leaguemonovariable/">League Mono Variable</a> est une police variable qui offre plusieurs variantes de fontes sur cet axe et on peut alors observer les variations de <code>font-stretch</code> selon les pourcentages choisis.</li> </ul> <p>Pour les polices variables TrueType ou OpenType, c'est l'axe de variation <code>wdth</code> qui implémente ces largeurs variables.</p> @@ -177,12 +177,12 @@ font-stretch: unset; <h4 id="HTML">HTML</h4> -<pre class="brush: html notranslate"><p class="stretch">Le texte est plus étiré.</p> +<pre class="brush: html"><p class="stretch">Le texte est plus étiré.</p> <p class="condensed">Le texte est plus resserré.</div></pre> <h4 id="CSS">CSS</h4> -<pre class="brush: css notranslate">.stretch { +<pre class="brush: css">.stretch { font-stretch: extra-expanded; } @@ -198,10 +198,9 @@ font-stretch: unset; <p>Note : cet exemple ne fonctionnera uniquement avec les navigateurs qui prennent en charge les valeurs <code><percentage></code>.</p> -<div id="variable-font-demo"> <h4 id="HTML_2">HTML</h4> -<pre class="brush: html notranslate"><div class="container"> +<pre class="brush: html"><div class="container"> <p class="condensed">an elephantine lizard</p> <p class="normal">an elephantine lizard</p> <p class="expanded">an elephantine lizard</p> @@ -210,7 +209,7 @@ font-stretch: unset; <h4 id="CSS_2">CSS</h4> -<pre class="brush: css notranslate">/* +<pre class="brush: css">/* Cet exemple utilise la police League Mono Variable, développée par Tyler Finck (https://www.tylerfinck.com/) et utilisée ici selon la licence SIL Open Font, Version 1.1 : @@ -243,11 +242,10 @@ http://scripts.sil.org/cms/scripts/page.php?item_id=OFL_web } </pre> -</div> <h4 id="Résultat_2">Résultat</h4> -<p>{{EmbedLiveSample("variable-font-demo", 1200, 250, "", "", "example-outcome-frame")}}</p> +<p>{{EmbedLiveSample("Avec_un_pourcentage", 1200, 250, "", "", "example-outcome-frame")}}</p> <h2 id="Spécifications">Spécifications</h2> |