diff options
Diffstat (limited to 'files/fr/web/css/font-style/index.html')
| -rw-r--r-- | files/fr/web/css/font-style/index.html | 14 |
1 files changed, 4 insertions, 10 deletions
diff --git a/files/fr/web/css/font-style/index.html b/files/fr/web/css/font-style/index.html index be9eccddf5..69952fea4f 100644 --- a/files/fr/web/css/font-style/index.html +++ b/files/fr/web/css/font-style/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/font-style <div>{{EmbedInteractiveExample("pages/css/font-style.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>La forme <strong>italique</strong> est généralement une forme cursive qui utilise moins d'espace horizontal que les autres formes classiques. La forme <strong>oblique</strong> quant à elle est simplement une version penchée de la forme normale. Les formes italique et oblique peuvent être synthétisées par le navigateur si elles sont absente (le moteur penche alors les glyphes de la forme normale), pour plus d'informations sur l'activation de cette synthèse, voir la propriété {{cssxref("font-synthesis")}}.</p> <h2 id="Syntaxe">Syntaxe</h2> @@ -60,11 +58,10 @@ font-style: unset; <p>Afin que l'exemple suivant fonctionne, votre navigateur doit prendre en charge la syntaxe <em>CSS Fonts Level 4</em> qui permet d'utiliser <code>font-style: oblique</code> suivi d'un angle.</p> -<div style="border: 10px solid #f5f9fa; padding: 1rem;">{{EmbedLiveSample("variable-font-example", 1200, 180, "", "", "example-outcome-frame")}}</div> +<p>{{EmbedLiveSample("Variable_fonts", 1200, 180, "", "", "example-outcome-frame")}}</p> <h4 id="HTML">HTML</h4> -<div id="variable-font-example"> <pre class="brush: html"><header> <input type="range" id="slant" name="slant" min="-90" max="90" /> <label for="slant">Slant</label> @@ -103,8 +100,7 @@ label { </pre> -<div class="hidden"> -<pre class="brush: css">html, body { +<pre class="brush: css hidden">html, body { max-height: 100vh; max-width: 100vw; overflow: hidden; @@ -128,7 +124,6 @@ header { margin-bottom: 0; } </pre> -</div> <h4 id="JavaScript">JavaScript</h4> @@ -146,7 +141,6 @@ slantInput.addEventListener('input', update); update(); </pre> -</div> <h2 id="Exemples">Exemples</h2> @@ -178,7 +172,7 @@ update(); <div class="note"> <p><strong>Note :</strong> Toutes les polices ne disposent pas nécessairement de formes pour <code>oblique</code> et <code>italic</code>, si ces formes sont absentes, le moteur simulera la forme absente à partir de celle qui est disponible. Voici un exemple du rendu d'une police qui dispose des différentes formes :</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/12049/Screen%20Shot%202015-12-05%20at%2008.41.03.png" style="height: 135px; width: 466px;"></p> +<p><img alt="" src="screen_shot_2015-12-05_at_08.41.03.png"></p> </div> <h2 id="Accessibilité">Accessibilité</h2> @@ -186,7 +180,7 @@ update(); <p>L'utilisation de grandes portions de textes avec <code>font-style: italic</code> peut rendre la lecture difficile pour les personnes dyslexiques ou ayant des troubles cognitifs.</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 1.4</a></li> + <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 1.4</a></li> <li><a href="https://www.w3.org/TR/WCAG21/#visual-presentation"><em>Understanding Success Criterion 1.4.8 | W3C Understanding WCAG 2.0 </em>(en anglais)</a></li> </ul> |