diff options
Diffstat (limited to 'files/fr/web/svg/tutorial/svg_fonts/index.html')
| -rw-r--r-- | files/fr/web/svg/tutorial/svg_fonts/index.html | 6 |
1 files changed, 3 insertions, 3 deletions
diff --git a/files/fr/web/svg/tutorial/svg_fonts/index.html b/files/fr/web/svg/tutorial/svg_fonts/index.html index eb27147dfd..6584fd5dc7 100644 --- a/files/fr/web/svg/tutorial/svg_fonts/index.html +++ b/files/fr/web/svg/tutorial/svg_fonts/index.html @@ -13,13 +13,13 @@ original_slug: Web/SVG/Tutoriel/polices_SVG <p>Lorsque SVG a été spécifié, le support des polices d'écriture pour le web n'était pas répandu dans les navigateurs. Comme l'accès au fichier de la police adéquate est cependant crucial pour afficher correctement le texte, une technologie de description des polices a été ajoutée à SVG pour offrir cette capacité. Elle n'a pas été conçue pour la compatibilité avec d'autres formats tels que le PostScript ou OTF, mais plutôt comme un moyen simple d'intégration des informations des glyphes en SVG lors de l'affichage.</p> <div class="note"><strong>Les Polices d'écritures SVG sont actuellement supportées uniquement sur Safari et le navigateur Android.</strong><br> -Internet Explorer <a href="http://blogs.msdn.com/b/ie/archive/2010/08/04/html5-modernized-fourth-ie9-platform-preview-available-for-developers.aspx">n'a pas envisagé de les implémenter</a>, la fonctionnalité a été <a href="https://www.chromestatus.com/feature/5930075908210688">supprimée de Chrome 38</a> (et Opera 25) et Firefox a <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=119490" title="https://bugzilla.mozilla.org/show_bug.cgi?id=119490">reporté sa mise en œuvre indéfiniment</a> pour se concentrer sur <a href="/en/WOFF" title="en/About WOFF">WOFF</a>. Cependant, d'autres outils comme le plugin <a class="external" href="http://www.adobe.com/svg/viewer/install/" title="http://www.adobe.com/svg/viewer/install/">Adobe SVG Viewer</a>, Batik et des modèles de document d'Inkscape supportent l'incorporation des Police d'écriture SVG.</div> +Internet Explorer <a href="http://blogs.msdn.com/b/ie/archive/2010/08/04/html5-modernized-fourth-ie9-platform-preview-available-for-developers.aspx">n'a pas envisagé de les implémenter</a>, la fonctionnalité a été <a href="https://www.chromestatus.com/feature/5930075908210688">supprimée de Chrome 38</a> (et Opera 25) et Firefox a <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=119490" title="https://bugzilla.mozilla.org/show_bug.cgi?id=119490">reporté sa mise en œuvre indéfiniment</a> pour se concentrer sur <a href="/en/WOFF" title="en/About WOFF">WOFF</a>. Cependant, d'autres outils comme le plugin <a class="external" href="http://www.adobe.com/svg/viewer/install/">Adobe SVG Viewer</a>, Batik et des modèles de document d'Inkscape supportent l'incorporation des Police d'écriture SVG.</div> <p>La base pour définir une police SVG est l'élément {{ SVGElement("font") }}.</p> <h2 id="Définir_une_police">Définir une police</h2> -<p>Quelques ingrédients sont nécessaires pour intégrer une police en SVG. Prenons un exemple de déclaration (celle <a class="external" href="http://www.w3.org/TR/SVG/fonts.html#FontElement" title="http://www.w3.org/TR/SVG/fonts.html#FontElement">de la spécification</a>), et expliquons-en les détails.</p> +<p>Quelques ingrédients sont nécessaires pour intégrer une police en SVG. Prenons un exemple de déclaration (celle <a class="external" href="http://www.w3.org/TR/SVG/fonts.html#FontElement">de la spécification</a>), et expliquons-en les détails.</p> <pre class="line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>font</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Font1<span class="punctuation token">"</span></span> <span class="attr-name token">horiz-adv-x</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>1000<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>font-face</span> <span class="attr-name token">font-family</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Super Sans<span class="punctuation token">"</span></span> <span class="attr-name token">font-weight</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>bold<span class="punctuation token">"</span></span> <span class="attr-name token">font-</span><span class="language-css style-attr token"><span class="attr-name token"><span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token">normal</span><span class="punctuation token">"</span></span> @@ -38,7 +38,7 @@ Internet Explorer <a href="http://blogs.msdn.com/b/ie/archive/2010/08/04/html5-m <p>Nous commençons avec l'élement {{ SVGElement("font") }}. Il contient un attribut id, ce qui permet de le référencer via une URI (voir plus bas). L'attribut <code>horiz-adv-x</code> définit sa largeur moyenne, comparée aux définitions des autres glyphes individules. La valeur 1000 définit une valeur raisonnable. Plusieurs autres attributs associés précisent l'affichage de la boite qui encapsule le glyphe.</p> -<p>L'élément {{ SVGElement("font-face") }} est l'équivalent SVG de la déclaration CSS <a href="https://developer.mozilla.org/en/CSS/@font-face" title="en/css/@font-face"><code>@font-face</code></a>. Il définit les propriétés de base de la police finale, telles que 'weight', 'style', etc. Dans l'exemple ci-dessus, la première et la plus importante est <code>font-family</code> : Elle pourra alors être référencée via la propriété <code>font-family</code> présente dans les CSS et les SVG. Les attributs <code>font-weight</code> et <code>font-style</code> ont la même fonction que leurs équivalents CSS. Les attributs suivants sont des instructions de rendu, pour le moteur d'affichage des polices ; par exemple : quelle est la taille des jambages supérieurs des glyphes (<a class="external external-icon" href="http://en.wikipedia.org/wiki/Ascender_%28typography%29" title="http://en.wikipedia.org/wiki/Ascender_(typography)">ascenders</a>).</p> +<p>L'élément {{ SVGElement("font-face") }} est l'équivalent SVG de la déclaration CSS <a href="https://developer.mozilla.org/en/CSS/@font-face" title="en/css/@font-face"><code>@font-face</code></a>. Il définit les propriétés de base de la police finale, telles que 'weight', 'style', etc. Dans l'exemple ci-dessus, la première et la plus importante est <code>font-family</code> : Elle pourra alors être référencée via la propriété <code>font-family</code> présente dans les CSS et les SVG. Les attributs <code>font-weight</code> et <code>font-style</code> ont la même fonction que leurs équivalents CSS. Les attributs suivants sont des instructions de rendu, pour le moteur d'affichage des polices ; par exemple : quelle est la taille des jambages supérieurs des glyphes (<a class="external external-icon" href="http://en.wikipedia.org/wiki/Ascender_%28typography%29">ascenders</a>).</p> <p>Its child, the {{ SVGElement("font-face-src") }} element, corresponds to CSS' <code>src</code> descriptor in <code>@font-face</code> declarations. You can point to external sources for font declarations by means of its children {{ SVGElement("font-face-name") }} and {{ SVGElement("font-face-uri") }}. The above example states that if the renderer has a local font available named "Super Sans Bold", it should use this instead.</p> |