diff options
Diffstat (limited to 'files/fr/web/css/@font-face')
| -rw-r--r-- | files/fr/web/css/@font-face/font-display/index.html | 92 | ||||
| -rw-r--r-- | files/fr/web/css/@font-face/font-family/index.html | 69 | ||||
| -rw-r--r-- | files/fr/web/css/@font-face/font-stretch/index.html | 183 | ||||
| -rw-r--r-- | files/fr/web/css/@font-face/font-style/index.html | 101 | ||||
| -rw-r--r-- | files/fr/web/css/@font-face/font-variation-settings/index.html | 71 | ||||
| -rw-r--r-- | files/fr/web/css/@font-face/font-weight/index.html | 173 | ||||
| -rw-r--r-- | files/fr/web/css/@font-face/index.html | 190 | ||||
| -rw-r--r-- | files/fr/web/css/@font-face/src/index.html | 85 | ||||
| -rw-r--r-- | files/fr/web/css/@font-face/unicode-range/index.html | 109 |
9 files changed, 1073 insertions, 0 deletions
diff --git a/files/fr/web/css/@font-face/font-display/index.html b/files/fr/web/css/@font-face/font-display/index.html new file mode 100644 index 0000000000..f044ddbc3e --- /dev/null +++ b/files/fr/web/css/@font-face/font-display/index.html @@ -0,0 +1,92 @@ +--- +title: font-display +slug: Web/CSS/@font-face/font-display +tags: + - CSS + - Descripteur + - Experimental + - Reference +translation_of: Web/CSS/@font-face/font-display +--- +<div>{{CSSRef}}</div> + +<p>La propriété <strong><code>font-display</code></strong> détermine la façon dont une fonte est affichée selon qu'elle ait été chargée et prête à être utilisée.</p> + +<h2 id="Le_déroulement_de_l'affichage_d'une_police">Le déroulement de l'affichage d'une police</h2> + +<p>La gestion d'une fonte de caractères s'effectue selon trois périodes distinctes dont la première commence lorsque l'agent utilisateur tente de télécharger une fonte.</p> + +<dl> + <dt>Période 1 : Blocage des fontes</dt> + <dd>Si la fonte n'est pas chargée, tout élément utilisant cette fonte doit être rendu avec une fonte alternative invisible. Si la fonte est chargée correctement pendant cette période, elle est utilisée normalement.</dd> + <dt>Période 2 : Échange des fontes</dt> + <dd>Si la fonte n'est pas chargée, tout élément utilisant cette fonte doit utiliser une fonte alternative visible. Si la fonte est chargée correctement pendant cette période, elle est utilisée normalement.</dd> + <dt>Période 3 : Échec du chargement des fontes</dt> + <dd>Si la fonte n'est pas chargée, l'agent utilisateur considère qu'il y a eu un échec du chargement et utilise la fonte alternative disponible.</dd> +</dl> + +<p>{{cssinfo}}</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="brush: css;">/* Valeurs avec un mot-clé */ +font-display: auto; +font-display: block; +font-display: swap; +font-display: fallback; +font-display: optional;</pre> + +<h3 id="Valeurs">Valeurs</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>La stratégie d'affichage de la fonte est définie par l'agent utilisateur.</dd> + <dt><code>block</code></dt> + <dd>La période de blocage est courte et est suivi d'une période d'échange infinie.</dd> + <dt><code>swap</code></dt> + <dd>La période de blocage est extrêmement courte et est suivie par une période d'échange infinie.</dd> + <dt><code>fallback</code></dt> + <dd>La période de blocage est extrêmement courte et est suivie par une courte période d'échange.</dd> + <dt><code>optional</code></dt> + <dd>La période de blocage est extrêmement courte et il n'y a pas de période d'échange.</dd> +</dl> + +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemples">Exemples</h2> + +<pre class="brush: css; highlight[7]">@font-face { + font-family: FonteExemple; + src: url(/chemin/vers/fonts/examplefont.woff) format('woff'), + url(/chemin/vers/fonts/examplefont.eot) format('eot'); + font-weight: 400; + font-style: normal; + font-display: fallback; +}</pre> + +<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-display-desc', 'font-display')}}</td> + <td>{{Spec2('CSS4 Fonts')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("css.at-rules.font-face.font-display")}}</p> diff --git a/files/fr/web/css/@font-face/font-family/index.html b/files/fr/web/css/@font-face/font-family/index.html new file mode 100644 index 0000000000..3d9e1c6717 --- /dev/null +++ b/files/fr/web/css/@font-face/font-family/index.html @@ -0,0 +1,69 @@ +--- +title: font-family +slug: Web/CSS/@font-face/font-family +tags: + - CSS + - Descripteur + - Reference +translation_of: Web/CSS/@font-face/font-family +--- +<div>{{CSSRef}}</div> + +<p>Le descripteur <strong><code>font-family</code></strong> permet aux auteurs d'un document de définir la police de caractères à utiliser au sein d'une règle @ {{cssxref("@font-face")}}.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="brush: css">/* Valeurs de chaînes de caractères */ +/* Type <string> */ +font-family: "police de caractères a"; +font-family: 'une autre police'; + +/* Valeur de type <custom-ident> */ +font-family: exemplepolice; +</pre> + +<h3 id="Valeurs">Valeurs</h3> + +<dl> + <dt><code><family-name></code></dt> + <dd>Définit le nom de la police de caractères.</dd> +</dl> + +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemples">Exemples</h2> + +<pre class="brush: css">@font-face { + font-family: exemplepolice; + src: url('exemplepolice.ttf'); +} +</pre> + +<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('CSS3 Fonts', '#font-family-desc', 'font-family')}}</td> + <td>{{Spec2('CSS3 Fonts')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("css.at-rules.font-face.font-family")}}</p> diff --git a/files/fr/web/css/@font-face/font-stretch/index.html b/files/fr/web/css/@font-face/font-stretch/index.html new file mode 100644 index 0000000000..e7ab910e64 --- /dev/null +++ b/files/fr/web/css/@font-face/font-stretch/index.html @@ -0,0 +1,183 @@ +--- +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> + +<pre>{{csssyntax}} +</pre> + +<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> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<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> diff --git a/files/fr/web/css/@font-face/font-style/index.html b/files/fr/web/css/@font-face/font-style/index.html new file mode 100644 index 0000000000..b3265e2d68 --- /dev/null +++ b/files/fr/web/css/@font-face/font-style/index.html @@ -0,0 +1,101 @@ +--- +title: font-style +slug: Web/CSS/@font-face/font-style +tags: + - CSS + - Descripteur + - Reference +translation_of: Web/CSS/@font-face/font-style +--- +<div>{{CSSRef}}</div> + +<p>Le descripteur <strong><code>font-style</code></strong>, associé à <a href="/fr/docs/Web/CSS/Règles_@">la règle @</a> {{cssxref("@font-face")}}, permet d'indiquer le style de police pour la police définie via la règle.</p> + +<p>Pour une police donnée (un ensemble de fontes), les auteurs peuvent télécharger plusieurs fichiers correspondant à la même police mais pour différents styles. Le descripteur <code>font-style</code> peut alors être utilisé afin d'indiquer explicitement le style associé à la fonte. La valeur du descripteur correspond à la propriété de la fonte.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<div class="syntaxbox"> +<pre class="brush: css">font-style: normal; +font-style: italic; +font-style: oblique; +font-style: oblique 30deg; +font-style: oblique 30deg 50deg;</pre> + +<h3 id="Valeurs">Valeurs</h3> + +<dl> + <dt><code>normal</code></dt> + <dd>C'est la fonte « normale » de la police qui est choisie.</dd> + <dt><code>italic</code></dt> + <dd>C'est la fonte italique de la police qui est choisie.</dd> + <dt><code>oblique</code></dt> + <dd>C'est la fonte, artificiellement penchée à partir de la police normale, de la police qui est choisie.</dd> + <dt><code>oblique</code> avec un angle</dt> + <dd>C'est la fonte oblique (c'est-à-dire une version artificiellement penchée, obtenue à partir de la police normale) de la police qui est choisie. L'angle indiqué correspond à la pente du texte.</dd> + <dt><code>oblique</code> avec un intervalle d'angle</dt> + <dd>Utilise une fonte comme <code>oblique</code> et indique un intervalle d'angles possibles pour la pente du texte. On notera que l'intervalle est uniquement pris en compte pour la valeur <code>oblique</code>, aucune autre valeur n'est autorisée après <code>normal</code> ou <code>italic</code>.</dd> +</dl> + +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemples">Exemples</h2> + +<p>Dans les exemples qui suivent, on utilisera les différentes formes liées à la police Garamond :</p> + +<pre class="brush: css">@font-face { + font-family: garamond; + src: url('garamond.ttf'); +}</pre> + +<p><img alt="unstyled Garamond" src="https://mdn.mozillademos.org/files/12265/garamondunstyled.JPG" style="height: 101px; width: 276px;"></p> + +<p>La version en italique du texte utilisera les mêmes glyphes que la version normale, artificiellement penchés de quelques degrés.</p> + +<p><img alt="artificially sloped garamond" src="https://mdn.mozillademos.org/files/12267/garamondartificialstyle.JPG" style="height: 101px; width: 276px;"></p> + +<p>En revanche, si on dispose d'une vraie version italique, on peut l'indiquer via le descripteur <code>src</code> et indiquer que c'est une police italique via <code>font-style</code>. Une « vraie » police italique utilisera des glyphes différents et la qualité calligraphique obtenue sera meilleure qu'avec les glyphes normaux penchés artificiellement.</p> + +<pre class="brush: css">@font-face { + font-family: garamond; + src: url('garamond-italic.ttf'); + /* On indique ici que la police est italique */ + font-style: italic; +}</pre> + +<p><img alt="italic garamond" src="https://mdn.mozillademos.org/files/12269/garamonditalic.JPG" style="height: 101px; width: 267px;"></p> + +<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-style')}}</td> + <td>{{Spec2('CSS4 Fonts')}}</td> + <td>Ajoute la possibilité d'utiliser le mot-clé <code>oblique</code> suivi par une valeur angulaire.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Fonts', '#font-prop-desc', 'font-style')}}</td> + <td>{{Spec2('CSS3 Fonts')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("css.at-rules.font-face.font-style")}}</p> +</div> diff --git a/files/fr/web/css/@font-face/font-variation-settings/index.html b/files/fr/web/css/@font-face/font-variation-settings/index.html new file mode 100644 index 0000000000..d9dd7e0789 --- /dev/null +++ b/files/fr/web/css/@font-face/font-variation-settings/index.html @@ -0,0 +1,71 @@ +--- +title: font-variation-settings +slug: Web/CSS/@font-face/font-variation-settings +tags: + - '@font-face' + - CSS + - Descripteur + - Reference +translation_of: Web/CSS/@font-face/font-variation-settings +--- +<div>{{CSSRef}}</div> + +<p>Le descripteur <strong><code>font-variation-settings</code></strong>, associé à la règle @ {{cssxref("@font-face")}} permet d'indiquer les variations de police de bas niveau pour les polices OpenType ou TrueType.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">/* On utilise les paramètres par défaut */ +font-variation-settings: normal; + +/* On indique les valeurs pour les noms des axes OpenType */ +font-variation-settings: "xhgt" 0.7;</pre> + +<h3 id="Valeurs">Valeurs</h3> + +<dl> + <dt><code>normal</code></dt> + <dd>Le texte est disposé avec les paramètres par défaut.</dd> + <dt><code><string> <number></code></dt> + <dd>Lorsque le texte est affiché, la liste des noms des axes OpenType est envoyée au moteur afin d'activer ou de désactiver des paramètres de la police. Chaque paramètre se compose d'un nom ({{cssxref("<string>")}}) de 4 caractères ASCII, suivis d'un nombre ({{cssxref("number")}}) qui indique la valeur de l'axe. Si la chaîne de caractères contient moins ou plus de caractères ou contient des caractères en dehors de l'intervalle de points de code U+20 - U+7E, la propriété entière sera considérée comme invalide. Le nombre utilisé peut être décimal ou négatif.</dd> +</dl> + +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemples">Exemples</h2> + +<pre class="brush: css">@font-face { + font-family: 'OpenTypeFont'; + src: url('open_type_font.woff2') format('woff2'); + font-weight: normal; + font-style: normal; + font-variation-settings: 'wght' 400, 'wdth' 300; +}</pre> + +<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-rend-desc', 'font-variation-settings')}}</td> + <td>{{Spec2('CSS4 Fonts')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("css.at-rules.font-face.font-variation-settings")}}</p> diff --git a/files/fr/web/css/@font-face/font-weight/index.html b/files/fr/web/css/@font-face/font-weight/index.html new file mode 100644 index 0000000000..21fcbc251f --- /dev/null +++ b/files/fr/web/css/@font-face/font-weight/index.html @@ -0,0 +1,173 @@ +--- +title: font-weight +slug: Web/CSS/@font-face/font-weight +tags: + - '@font-face' + - CSS + - Descripteur + - Reference +translation_of: Web/CSS/@font-face/font-weight +--- +<p>{{CSSRef}}</p> + +<p>Le descripteur CSS <strong><code>font-weight</code></strong> permet aux auteurs d'indiquer les graisses pour les polices fournies dans une règle {{cssxref("@font-face")}}. La propriété <code><a href="/fr/docs/Web/CSS/font-weight">font-weight</a></code> peut être utilisée séparément pour indiquer la graisse des caractères d'un texte (c'est-à-dire s'ils sont en gras, normaux ou plus fins).</p> + +<p>Pour une police particulière, les auteurs peuvent télécharger différentes fontes qui utilisent les différents styles d'une même police et alors utiliser le descripteur <code>font-weight</code> afin de définir explicitement le niveau de graisse. La valeur utilisée pour le descripteur est la même que celle qui peut être utilisée pour la propriété.</p> + +<p>{{cssinfo}}</p> + +<p>Il existe généralement un nombre limité de niveaux de graisse pour une police donnée. Lorsqu'on utilise un niveau de graisse qui n'existe pas, c'est le niveau le plus proche qui est utilisé. Les polices qui ne disposent pas d'une fonte en gras sont généralement synthétisées par l'agent utilisateur (pour empêcher cette synthèse, on pourra utiliser la propriété {{cssxref('font-synthesis')}}).</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre>/* Valeurs simples */ +font-weight: normal; +font-weight: bold; +font-weight: 400; + +/* Valeurs multiples */ +font-weight: normal bold; +font-weight: 300 500; +</pre> + +<h3 id="Valeurs">Valeurs</h3> + +<dl> + <dt><code>normal</code></dt> + <dd>Le niveau de graisse normal (équivaut à la valeur numérique <code>400</code>).</dd> + <dt><code>bold</code></dt> + <dd>La fonte en gras (équivaut à la valeur numérique <code>700</code>).</dd> + <dt><code><number></code></dt> + <dd>Un nombre (une valeur de type {{cssxref("<number>")}}) comprise entre 1 et 1000 (et incluant ces limites). Plus la valeur est élevée, plus le niveau de graisse utilisé sera important. Certains valeurs communément utilisées possèdent un nom : voir ci-après le tableau de correspondance entre les noms et les valeurs).</dd> +</dl> + +<p>Dans les versions antérieures de la spécification, <code>font-weight</code> n'acceptait que les mots-clés et les valeurs numériques 100, 200, 300, 400, 500, 600, 700, 800 et 900. Les polices qui ne sont pas variables pourront n'utiliser que ces valeurs (les valeurs intermédiaires, ex. 451) seront ramenées à la valeur palier la plus proche.</p> + +<p>Avec la spécification CSS Fonts de niveau 4, la syntaxe a été étendue afin que n'importe quel nombre entre 1 and 1000 (au sens large) puisse être utilisé. Les polices variables (voir plus bas) ont aussi été introduites et on peut donc avoir un contrôle plus précis sur le niveau de graisse utilisé.</p> + +<h3 id="Correspondance_entre_les_noms_et_les_valeurs_numériques">Correspondance entre les noms et les valeurs numériques</h3> + +<p>Les valeurs numériques entre <code>100</code> et <code>900</code> correspondent (approximativement) à ces noms communément utilisés :</p> + +<table> + <thead> + <tr> + <th scope="col">Valeur</th> + <th scope="col">Nom commun</th> + </tr> + </thead> + <tbody> + <tr> + <td>100</td> + <td>Thin (Hairline)</td> + </tr> + <tr> + <td>200</td> + <td>Extra Light (Ultra Light)</td> + </tr> + <tr> + <td>300</td> + <td>Light</td> + </tr> + <tr> + <td>400</td> + <td>Normal</td> + </tr> + <tr> + <td>500</td> + <td>Medium</td> + </tr> + <tr> + <td>600</td> + <td>Semi Bold (Demi Bold)</td> + </tr> + <tr> + <td>700</td> + <td>Bold</td> + </tr> + <tr> + <td>800</td> + <td>Extra Bold (Ultra Bold)</td> + </tr> + <tr> + <td>900</td> + <td>Black (Heavy)</td> + </tr> + </tbody> +</table> + +<h3 id="Polices_variables">Polices variables</h3> + +<p>La plupart des polices se déclinent en fontes avec des niveaux de graisses distincts. Toutefois, certaines polices, appelées polices variables, permettent d'utiliser des niveaux de graisse intermédiaires plus ou moins finement. On peut ainsi obtenir une fonte d'un niveau de graisse plus précis.</p> + +<p>Pour les polices variables TrueType ou OpenType, c'est l'axe de variation <code>"wght"</code> qui est utilisé afin d'implémenter ces largeurs variables.</p> + +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +<pre>{{csssyntax}} +</pre> + +<h2 id="Exemples">Exemples</h2> + +<p>Dans l'exemple suivant, on récupère une police Open Sans et on l'importe en utilisant le niveau de graisse normal.</p> + +<pre>@font-face { + font-family: "Open Sans"; + src: local("Open Sans") format("woff2"), + url("/fonts/OpenSans-Regular-webfont.woff") format("woff"); + font-weight: 400; +}</pre> + +<h2 id="Accessibilité">Accessibilité</h2> + +<p>Pour les personnes ayant une vision faible, il peut être extrêmement difficile de lire un texte avec <code>font-weight</code> qui vaut <code>100</code> ou <code>200</code>, notamment <a href="/fr/docs/Web/CSS/color#Accessibilité">si le contraste entre le texte et l'arrière-plan est 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 1.4</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html" rel="noopener"><em>Understanding Success Criterion 1.4.8 - W3C Understanding WCAG 2.0</em> (en anglais)</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-weight')}}</td> + <td>{{Spec2('CSS4 Fonts')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('CSS3 Fonts', '#font-prop-desc', 'font-weight')}}</td> + <td>{{Spec2('CSS3 Fonts')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("css.at-rules.font-face.font-weight")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><code><a href="/fr/docs/Web/CSS/font-weight">font-weight</a></code></li> + <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-stretch", "font-stretch 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> diff --git a/files/fr/web/css/@font-face/index.html b/files/fr/web/css/@font-face/index.html new file mode 100644 index 0000000000..9e55c634fb --- /dev/null +++ b/files/fr/web/css/@font-face/index.html @@ -0,0 +1,190 @@ +--- +title: '@font-face' +slug: Web/CSS/@font-face +tags: + - CSS + - Reference + - Règle @ +translation_of: Web/CSS/@font-face +--- +<div>{{CSSRef}}</div> + +<p>La <a href="/fr/docs/Web/CSS/R%C3%A8gles_@">règle @</a> <strong><code>@font-face</code></strong> permet de définir les polices d'écriture à utiliser pour afficher le texte de pages web. Cette police peut être chargée depuis un serveur distant ou depuis l'ordinateur de l'utilisateur. Si la fonction <code>local()</code> est utilisée, elle indique à l'agent utilisateur de prendre en compte une police présente sur le poste de l'utilisateur.</p> + +<p>En permettant aux auteurs de fournir leurs propres polices, il n'est plus nécessaire de dépendre uniquement des polices qui sont installées sur les postes des utilisateurs.</p> + +<p>Il est courant d'utiliser les deux formes <code>url()</code> et <code>local()</code> afin de pouvoir utiliser une police locale si elle est disponible ou d'en télécharger une autre au cas où.</p> + +<p>La règle <code>@font-face</code> peut être utilisée au niveau global d'une feuille de style et également au sein d'un groupe lié à <a href="/fr/docs/Web/CSS/Règles_@">une règle @ conditionnelle</a>.</p> + +<pre class="brush: css no-line-numbers">@font-face { + font-family: "Open Sans"; + src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"), + url("/fonts/OpenSans-Regular-webfont.woff") format("woff"); +}</pre> + +<h2 id="Syntaxe">Syntaxe</h2> + +<h3 id="Descripteurs">Descripteurs</h3> + +<dl> + <dt>{{cssxref("@font-face/font-display", "font-display")}}</dt> + <dd>Ce descripteur détermine la façon dont une fonte est affichée selon qu'elle a été téléchargée et/ou si elle est prête à être utilisée.</dd> + <dt>{{cssxref("@font-face/font-family", "font-family")}}</dt> + <dd>Ce descripteur définit un nom qui sera utilisé pour désigner cette police dans les différentes règles associées.</dd> + <dt>{{cssxref("@font-face/font-stretch", "font-stretch")}}</dt> + <dd>Une valeur {{cssxref("font-stretch")}}. Depuis Firefox 61 et pour les navigateurs récents, il est possible d'utiliser deux valeurs afin d'indiquer l'intervalle pris en charge par une fonte, par exemple : <code>font-stretch: 50% 200%;</code>.</dd> + <dt>{{cssxref("@font-face/font-style", "font-style")}}</dt> + <dd>Une valeur {{cssxref("font-style")}}. Depuis Firefox 61 et pour les navigateurs récents, il est possible d'utiliser deux valeurs afin d'indiquer l'intervalle pris en charge par une fonte, par exemple : <code>font-style: oblique 20deg 50deg;</code>.</dd> + <dt>{{cssxref("@font-face/font-variant", "font-variant")}}</dt> + <dd>Une valeur {{cssxref("font-variant")}}.</dd> + <dt>{{cssxref("@font-face/font-weight", "font-weight")}}</dt> + <dd>Une valeur {{cssxref("font-weight")}}. Depuis Firefox 61 et pour les navigateurs récents, il est possible d'utiliser deux valeurs afin d'indiquer l'intervalle pris en charge par une fonte, par exemple : <code>font-weight: 100 400;</code>.</dd> + <dt>{{cssxref("font-feature-settings", "font-feature-settings")}}</dt> + <dd>Ce descripteur permet d'avoir un contrôle avancé sur les fonctionnalités typographiques relatives aux fontes OpenType.</dd> + <dt>{{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}</dt> + <dd>Ce descripteur permet d'avoir un contrôle de bas niveau sur les variations des polices OpenType et TrueType en indiquant les nom des axes et des fonctionnalités à faire varier.</dd> + <dt>{{cssxref("@font-face/src", "src")}}</dt> + <dd> + <p>Indique la ressource qui contient les données pour la police d'écriture. Cela peut être une URL vers un fichier distant ou le nom d'une police de caractères présente sur l'ordinateur de l'utilisateur.</p> + + <p>On peut fournir une indication de format au navigateur (afin que celui-ci sélectionne celui qui lui convient le mieux) sous la forme d'une fonction <code>format()</code> qui contient le type comme argument :</p> + + <pre class="brush: css">src: url(ideal-sans-serif.woff) <strong>format("woff")</strong>, + url(basic-sans-serif.ttf) <strong>format("truetype")</strong>;</pre> + + <p>Les types utilisables sont : <code>"woff"</code>, <code>"woff2"</code>, <code>"truetype"</code>, <code>"opentype"</code>, <code>"embedded-opentype"</code> et <code>"svg"</code>.</p> + </dd> + <dt>{{cssxref("@font-face/unicode-range", "unicode-range")}}</dt> + <dd>L'intervalle des points de code Unicode pour lesquels la règle <code>@font-face</code> s'applique.</dd> +</dl> + +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Police_distante">Police distante</h3> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">@font-face { + font-family: "Bitstream Vera Serif Bold"; + src: url("/static/styles/libs/font-awesome/fonts/fontawesome-webfont.fdf491ce5ff5.woff"); +} + +body { + font-family: "Bitstream Vera Serif Bold", serif; +} </pre> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><p> Et voici Bitstream Vera Serif Bold.</p> +</pre> + +<h4 id="Résultat">Résultat</h4> + +<p>{{EmbedLiveSample("Police_distante")}}</p> + +<h3 id="Police_locale">Police locale</h3> + +<p>Ici, l'agent utilisateur tente d'utiliser la police Helvetica Neue Bold ou HelveticaNeue-Bold si elle existe sur l'ordinateur de l'utilisateur. Sinon, il utilise la police distante MgOpenModernaBold.ttf.</p> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css">@font-face { + font-family: MaHelvetica; + src: local("Helvetica Neue Bold"), + local("HelveticaNeue-Bold"), + url(MgOpenModernaBold.ttf); + font-weight: bold; +}</pre> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><p> Et voici Ma Helvetica.</p> +</pre> + +<h4 id="Résultat_2">Résultat</h4> + +<p>{{EmbedLiveSample("Police_locale")}}</p> + +<h2 id="Types_MIME_associés_aux_polices">Types MIME associés aux polices</h2> + +<p>Voici, selon les différents formats de police, les types MIME associés :</p> + +<dl> + <dt>TrueType</dt> + <dd><code>font/ttf</code></dd> + <dt>OpenType</dt> + <dd><code>font/otf</code></dd> + <dt>Web Open File Format</dt> + <dd><code>font/woff</code></dd> + <dt>Web Open File Format 2</dt> + <dd><code>font/woff2</code></dd> +</dl> + +<h2 id="Notes">Notes</h2> + +<ul> + <li>Les restrictions d'origine (même domaine) s'appliquent également sur les polices web sauf si <a href="/fr/docs/HTTP/Access_control_CORS">les contrôles d'accès HTTP</a> sont paramétrés afin de lever cette restriction.</li> + <li><code>@font-face</code> ne peut pas être déclaré au sein d'un sélecteur CSS. Ainsi l'exemple suivant ne fonctionnera pas : + <pre class="brush: css example-bad">.nomClasse { + @font-face { + font-family: MyHelvetica; + src: local("Helvetica Neue Bold"), + local("HelveticaNeue-Bold"), + url(MgOpenModernaBold.ttf; + font-weight: bold; + } +}</pre> + </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('WOFF2.0', '', 'WOFF2 font format')}}</td> + <td>{{Spec2('WOFF2.0')}}</td> + <td>Spécification du format de police avec un nouvel algorithme de compression.</td> + </tr> + <tr> + <td>{{SpecName('WOFF1.0', '', 'WOFF font format')}}</td> + <td>{{Spec2('WOFF1.0')}}</td> + <td>Spécification du format de police.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Fonts', '#font-face-rule', '@font-face')}}</td> + <td>{{Spec2('CSS3 Fonts')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("css.at-rules.font-face")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/Guide/WOFF">À propos de WOFF</a></li> + <li><a href="https://everythingfonts.com/font-face">Le générateur de règles <code>@font-face</code> par Everythingfonts </a></li> + <li><a href="https://www.fontsquirrel.com/tools/webfont-generator">Le générateur de règles @font-face par FontSquirrel</a></li> + <li><a href="http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/">Des polices obtenues avec <code>@font-face</code> (en anglais, sur hacks.mozilla.org)</a></li> + <li><a href="http://openfontlibrary.org/">Une bibliothèque de polices ouvertes (<em>Open Font Library</em>)</a></li> + <li><a href="http://caniuse.com/woff">Où puis-je utiliser WOFF ? (en anglais sur caniuse.com)</a></li> + <li><a href="http://caniuse.com/svg-fonts">Où puis-je utiliser les polices SVG ?</a></li> +</ul> diff --git a/files/fr/web/css/@font-face/src/index.html b/files/fr/web/css/@font-face/src/index.html new file mode 100644 index 0000000000..ff77ace03b --- /dev/null +++ b/files/fr/web/css/@font-face/src/index.html @@ -0,0 +1,85 @@ +--- +title: src +slug: Web/CSS/@font-face/src +tags: + - CSS + - Descripteur + - Reference +translation_of: Web/CSS/@font-face/src +--- +<div>{{CSSRef}}</div> + +<p>Le descripteur <strong><code>src</code></strong>, associé à la règle @ {{cssxref("@font-face")}}, permet de définir la ressource qui contient les données relatives à une police de caractères. Ce descripteur est obligatoire afin que la règle <code>@font-face</code> soit considérée comme valide.</p> + +<p>Sa valeur est composée d'une liste de noms séparés par des virgules, ordonnés par priorité dont chacun fait référence à une police de caractères externe ou locale. Lorsqu'une police doit être utilisée, l'agent utilisateur parcourt la liste de ces références et utilise la première police qui peut être chargée correctement. Si la police de caractères contient des données invalides ou si le nom ne correspond à aucune police de caractères, l'agent utilisateur passe à la suivante.</p> + +<p>Là aussi, les URL utilisées peuvent être relatives. Dans le cas où une URL relative est utilisée, elle est résolue grâce à l'emplacement de la feuille de styles qui contient la règle <code>@font-face</code>. Pour les polices SVG, l'URL pointe vers un élément du document qui contient les définitions SVG de la police. Si l'élément de référence est absent, une référence implicite sera construite avec la première police définie. De même, pour les formats contenant plusieurs polices, seule une police est chargée pour une règle <code>@font-face</code> donnée. Les identifiants de fragment de l'URL peuvent être utilisés pour indiquer la police à charger. Si le format conteneur ne possède pas de schéma d'identification des fragments, ce sera un schéma simple d'indexation (ex. "font-collection#1" pour la première police, "font-collection#2" pour la seconde, etc.) qui sera utilisé.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="brush: css">/* <url> */ +src: url(https://unsiteweb.com/chemin/vers/police.woff); /* URL absolue */ +src: url(chemin/vers/police.woff); /* URL relative */ +src: url(chemin/vers/police.woff) format("woff"); /* format explicite */ +src: url('chemin/vers/police.woff'); /* URL entre quotes */ +src: url(chemin/vers/policesvg.svg#exemple); /* fragment identifiant une police */ + +/* Valeurs de type <font-face-name> */ +src: local(police); /* nom sans double quote */ +src: local(une police); /* nom avec espace */ +src: local("police"); /* nom entre double quotes */ + +/* Liste avec plusieurs éléments */ +src: local(police), url(chemin/vers/police.svg) format("svg"), + url(chemin/vers/police.woff) format("woff"), + url(chemin/vers/police.otf) format("opentype"); +</pre> + +<h3 id="Valeurs">Valeurs</h3> + +<dl> + <dt><code><url> [ format( <string># ) ]?</code></dt> + <dd>Définit une référence externe, composée d'une URL et d'une indication optionnelle quant au format de la police chargée via cette URL. L'indication de format contient une liste de chaînes de caractères dont chacune doit correspondre à un format de police connu. Si un agent utilisateur ne prend pas en charge le format indiqué, il ne téléchargera pas la ressource liée à la police. Si aucune indication de format n'est fournie, la ressource associée est toujours téléchargée.</dd> + <dt><code><font-face-name></code></dt> + <dd>Définit le nom d'une police installée localement grâce à la fonction <code>local()</code> qui permet d'identifier une police de caractères au sein d'une famille de polices. Le nom de la police peut être entre double quotes.</dd> +</dl> + +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemples">Exemples</h2> + +<pre class="brush: css">@font-face { + font-family: policeexemple; + src: local(Police Exemple), url('policeexemple.woff') format("woff"), + url('policeexemple.otf') format("opentype"); +} +</pre> + +<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('CSS3 Fonts', '#src-desc', 'src')}}</td> + <td>{{Spec2('CSS3 Fonts')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("css.at-rules.font-face.src")}}</p> diff --git a/files/fr/web/css/@font-face/unicode-range/index.html b/files/fr/web/css/@font-face/unicode-range/index.html new file mode 100644 index 0000000000..e8eec9242d --- /dev/null +++ b/files/fr/web/css/@font-face/unicode-range/index.html @@ -0,0 +1,109 @@ +--- +title: unicode-range +slug: Web/CSS/@font-face/unicode-range +tags: + - CSS + - Descripteur + - Experimental + - Reference +translation_of: Web/CSS/@font-face/unicode-range +--- +<div>{{cssref}}</div> + +<p>Le descripteur <strong><code>unicode-range</code></strong>, associé à la règle @ {{cssxref("@font-face")}}, définit l'intervalle de caractères qui peuvent être représentés par cette police pour la page. Si la page n'utilise aucun caractère de cet intervalle, la police n'est pas téléchargée. Si, au contraire, elle utilise au moins un caractère appartenant à cet intervalle, toute la police est téléchargée.</p> + +<p>Le but de ce descripteur est de segmenter les ressources liées aux polices afin que le navigateur puisse ne télécharger que les polices dont il a besoin pour le texte d'un document. Ainsi, un site disposant de nombreuses traductions pourrait proposer des ressources distinctes pour l'anglais, le grec et le japonais et seules les ressources nécessaires (dont les fichiers de polices) seraient téléchargées.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="brush:css">/* Valeurs <unicode-range> */ +unicode-range: U+26; /* un seul point de code */ +unicode-range: U+0-7F; +unicode-range: U+0025-00FF; /* un intervalle spécifique */ +unicode-range: U+4??; /* un intervalle de substitution */ +unicode-range: U+0025-00FF, U+4??; /* plusieurs valeurs */ +</pre> + +<h3 id="Valeurs">Valeurs</h3> + +<p>Une valeur de type <code><unicode-range></code> peut se présenter de trois façons différentes :</p> + +<ul> + <li>un seul point de code + <ul> + <li>Ex : <code>U+26</code></li> + </ul> + </li> + <li>un intervalle spécifique de points de code + <ul> + <li>Ex : <code>U+0025-00FF</code> indique que l'intervalle contient tous les caractères contenus entre les points de code <code>U+0025</code> et <code>U+00FF</code></li> + </ul> + </li> + <li>un intervalle de substitution indiqué par <code>?</code> + <ul> + <li>Un intervalle de points de code Unicode indiqué par une valeur contenant un point d'interrogation. Ainsi, <code>U+4??</code> signifie « tous les caractères contenus dans l'intervalle entre les points de code <code>U+400</code> et <code>U+4FF</code>).</li> + </ul> + </li> +</ul> + +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemples">Exemples</h2> + +<p>Dans cet exemple, on crée un élément HTML {{HTMLElement("div")}} pour lequel on veut que l'esperluette soit mise en forme avec une police différente. Pour que le résultat soit apparent, on utilisera une police sans empattement pour le texte (<em>Helvetica</em>) et une police avec des empattements (<em>Times New Roman</em>) pour l'esperluette.</p> + +<h3 id="CSS">CSS</h3> + +<p>Dans la feuille de style CSS, on définit une règle {{cssxref("@font-face")}} qui n'inclue qu'un seul caractère. Cela signifie que seul ce caractère sera affiché avec cette police. On aurait également pu encadrer l'esperluette dans un élément {{HTMLElement("span")}} et appliquer une autre règle sur cet élément mais on aurait alors eu un balisage plus lourd et une règle spécifique en plus sur la feuille de style.</p> + +<pre class="brush: css">@font-face { + font-family: 'Ampersand'; + src: local('Times New Roman'); + unicode-range: U+26; +} + +div { + font-size: 4em; + font-family: Ampersand, Helvetica, sans-serif; +}</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div>Me & You = Us</div></pre> + +<h3 id="Résultat_de_référence_(image_statique)">Résultat de référence (image statique)</h3> + +<p><img src="https://mdn.mozillademos.org/files/6043/Refresult.png"></p> + +<h3 id="Résultat_du_navigateur">Résultat du navigateur</h3> + +<p>{{EmbedLiveSample("Exemples", 500,104)}}</p> + +<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('CSS3 Fonts', '#descdef-font-face-unicode-range', 'unicode-range')}}</td> + <td>{{Spec2('CSS3 Fonts')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("css.at-rules.font-face.unicode-range")}}</p> |