diff options
Diffstat (limited to 'files/fr/web/css/css_fonts')
| -rw-r--r-- | files/fr/web/css/css_fonts/index.md | 169 | ||||
| -rw-r--r-- | files/fr/web/css/css_fonts/opentype_fonts_guide/index.md | 228 | ||||
| -rw-r--r-- | files/fr/web/css/css_fonts/variable_fonts_guide/index.md | 257 |
3 files changed, 299 insertions, 355 deletions
diff --git a/files/fr/web/css/css_fonts/index.md b/files/fr/web/css/css_fonts/index.md index 76d002b94e..f528870b38 100644 --- a/files/fr/web/css/css_fonts/index.md +++ b/files/fr/web/css/css_fonts/index.md @@ -8,17 +8,18 @@ tags: - Reference translation_of: Web/CSS/CSS_Fonts --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><strong>CSS Fonts</strong> est un module CSS qui définit des propriétés relatives aux polices de caractères et la façon dont les ressources des polices sont chargées. Il permet de définir le style d'une police, comme sa famille, sa taille ou sa graisse ainsi que la variante du glyphe à utiliser dans le cas des polices disposant de plusieurs glyphes par caractère. Il permet également de définir la hauteur d'une ligne.</p> +**CSS Fonts** est un module CSS qui définit des propriétés relatives aux polices de caractères et la façon dont les ressources des polices sont chargées. Il permet de définir le style d'une police, comme sa famille, sa taille ou sa graisse ainsi que la variante du glyphe à utiliser dans le cas des polices disposant de plusieurs glyphes par caractère. Il permet également de définir la hauteur d'une ligne. -<h2 id="Exemple_simple">Exemple simple</h2> +## Exemple simple -<p>L'exemple qui suit illustre l'utilisation simple de propriétés relatives aux polices afin de mettre en forme le texte d'un paragraphe.</p> +L'exemple qui suit illustre l'utilisation simple de propriétés relatives aux polices afin de mettre en forme le texte d'un paragraphe. -<h3 id="CSS">CSS</h3> +### CSS -<pre class="brush: css">p { +```css +p { width: 600px; margin: 0 auto; font-family: "Helvetica Neue", "Arial", sans-serif; @@ -27,100 +28,72 @@ translation_of: Web/CSS/CSS_Fonts font-variant-ligatures: normal; font-size: 2rem; letter-spacing: 1px; -}</pre> +} +``` -<h3 id="HTML">HTML</h3> +### HTML -<pre class="brush: html"><p> +```html +<p> Alice ne fut pas très-étonnée, tant elle commençait à s’habituer aux événements extraordinaires. Tandis qu’elle regardait encore l’endroit que le Chat venait de quitter, il reparut tout à coup. -</p></pre> - -<h3 id="Résultat">Résultat</h3> - -<p>{{EmbedLiveSample('Exemple_simple', '100%', '200')}}</p> - -<h2 id="Exemples_utilisant_les_polices_variables">Exemples utilisant les polices variables</h2> - -<p>Vous pouvez trouver plusieurs exemples utilisant les polices variables sur <a href="https://v-fonts.com/">v-fonts.com</a> et <a href="https://www.axis-praxis.org/">axis-praxis.org</a>. Notre <a href="/fr/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide">guide sur les polices variables</a> contient des informations et des exemples d'utilisation.</p> - -<h2 id="Référence">Référence</h2> - -<h3 id="Propriétés">Propriétés</h3> - -<ul> - <li>{{cssxref("font")}}</li> - <li>{{cssxref("font-family")}}</li> - <li>{{cssxref("font-feature-settings")}}</li> - <li>{{cssxref("font-kerning")}}</li> - <li>{{cssxref("font-language-override")}}</li> - <li>{{cssxref("font-optical-sizing")}}</li> - <li>{{cssxref("font-size")}}</li> - <li>{{cssxref("font-size-adjust")}}</li> - <li>{{cssxref("font-stretch")}}</li> - <li>{{cssxref("font-style")}}</li> - <li>{{cssxref("font-synthesis")}}</li> - <li>{{cssxref("font-variant")}}</li> - <li>{{cssxref("font-variant-alternates")}}</li> - <li>{{cssxref("font-variant-caps")}}</li> - <li>{{cssxref("font-variant-east-asian")}}</li> - <li>{{cssxref("font-variant-ligatures")}}</li> - <li>{{cssxref("font-variant-numeric")}}</li> - <li>{{cssxref("font-variant-position")}}</li> - <li>{{cssxref("font-variation-settings")}}</li> - <li>{{cssxref("font-weight")}}</li> - <li>{{cssxref("line-height")}}</li> -</ul> - -<h3 id="Règles">Règles @</h3> - -<ul> - <li>{{cssxref("@font-face")}}</li> - <li>{{cssxref("@font-feature-values")}}</li> - </ul> - -<h2 id="Guides">Guides</h2> - -<dl> - <dt><a href="/fr/docs/Learn/CSS/Styling_text/Fundamentals">Mise en forme du texte et utilisation des polices</a></dt> - <dd>Dans cet article, destiné aux débutants, nous abordons en détail les fonctionnalités pour la mise en forme du texte et la modification de la police.</dd> - <dt><a href="/fr/docs/Web/CSS/CSS_Fonts/OpenType_fonts_guide">Guide sur les caractéristiques de police OpenType</a></dt> - <dd>Les caractéristiques de police ou variantes font référence à différents glyphes ou styles de caractère contenus dans une police OpenType. Cela inclut notamment les ligatures (des caractères spéciaux qui permettent de combiner des caractères entre eux comme œ qui est la ligature entre o et e), le crénage, etc. Toutes ces caractéristiques sont des caractéristiques OpenType Features et peuvent être utilisées sur le Web grâce à certaines propriétés spécifiques qui permettent un contrôle de bas niveau comme {{cssxref("font-feature-settings")}}. Dans cet article, nous verrons tout ce qu'il faut savoir pour manipuler les caractéristiques OpenType avec CSS.</dd> - <dt><a href="/fr/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide">Guide sur les polices variables</a></dt> - <dd>Les polices variables sont une évolution de la spécification OpenType qui permet de faire varier différents axes d'une police (provenant d'un seul fichier) plutôt que d'avoir plusieurs polices d'une même fonte. Cet article fournit l'ensemble des informations nécessaires à l'exploration des polices variables.</dd> -</dl> - -<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')}}</td> - <td>{{Spec2('CSS4 Fonts')}}</td> - <td>Ajout de <code>font-variation-settings</code> (ainsi que des propriétés de haut niveau associées) et de <code>font-optical-sizing</code>.</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Fonts')}}</td> - <td>{{Spec2('CSS3 Fonts')}}</td> - <td>Ajout de <code>font-feature-settings</code> (ainsi que des propriétés de haut niveau associées)</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'fonts.html#font-shorthand', '')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('CSS1', '#font', '')}}</td> - <td>{{Spec2('CSS1')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +</p> +``` + +### Résultat + +{{EmbedLiveSample('Exemple_simple', '100%', '200')}} + +## Exemples utilisant les polices variables + +Vous pouvez trouver plusieurs exemples utilisant les polices variables sur [v-fonts.com](https://v-fonts.com/) et [axis-praxis.org](https://www.axis-praxis.org/). Notre [guide sur les polices variables](/fr/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide) contient des informations et des exemples d'utilisation. + +## Référence + +### Propriétés + +- {{cssxref("font")}} +- {{cssxref("font-family")}} +- {{cssxref("font-feature-settings")}} +- {{cssxref("font-kerning")}} +- {{cssxref("font-language-override")}} +- {{cssxref("font-optical-sizing")}} +- {{cssxref("font-size")}} +- {{cssxref("font-size-adjust")}} +- {{cssxref("font-stretch")}} +- {{cssxref("font-style")}} +- {{cssxref("font-synthesis")}} +- {{cssxref("font-variant")}} +- {{cssxref("font-variant-alternates")}} +- {{cssxref("font-variant-caps")}} +- {{cssxref("font-variant-east-asian")}} +- {{cssxref("font-variant-ligatures")}} +- {{cssxref("font-variant-numeric")}} +- {{cssxref("font-variant-position")}} +- {{cssxref("font-variation-settings")}} +- {{cssxref("font-weight")}} +- {{cssxref("line-height")}} + +### Règles @ + +- {{cssxref("@font-face")}} +- {{cssxref("@font-feature-values")}} + +## Guides + +- [Mise en forme du texte et utilisation des polices](/fr/docs/Learn/CSS/Styling_text/Fundamentals) + - : Dans cet article, destiné aux débutants, nous abordons en détail les fonctionnalités pour la mise en forme du texte et la modification de la police. +- [Guide sur les caractéristiques de police OpenType](/fr/docs/Web/CSS/CSS_Fonts/OpenType_fonts_guide) + - : Les caractéristiques de police ou variantes font référence à différents glyphes ou styles de caractère contenus dans une police OpenType. Cela inclut notamment les ligatures (des caractères spéciaux qui permettent de combiner des caractères entre eux comme œ qui est la ligature entre o et e), le crénage, etc. Toutes ces caractéristiques sont des caractéristiques OpenType Features et peuvent être utilisées sur le Web grâce à certaines propriétés spécifiques qui permettent un contrôle de bas niveau comme {{cssxref("font-feature-settings")}}. Dans cet article, nous verrons tout ce qu'il faut savoir pour manipuler les caractéristiques OpenType avec CSS. +- [Guide sur les polices variables](/fr/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide) + - : Les polices variables sont une évolution de la spécification OpenType qui permet de faire varier différents axes d'une police (provenant d'un seul fichier) plutôt que d'avoir plusieurs polices d'une même fonte. Cet article fournit l'ensemble des informations nécessaires à l'exploration des polices variables. + +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------ | -------------------------------- | ------------------------------------------------------------------------------------------------------------------- | +| {{SpecName('CSS4 Fonts')}} | {{Spec2('CSS4 Fonts')}} | Ajout de `font-variation-settings` (ainsi que des propriétés de haut niveau associées) et de `font-optical-sizing`. | +| {{SpecName('CSS3 Fonts')}} | {{Spec2('CSS3 Fonts')}} | Ajout de `font-feature-settings` (ainsi que des propriétés de haut niveau associées) | +| {{SpecName('CSS2.1', 'fonts.html#font-shorthand', '')}} | {{Spec2('CSS2.1')}} | | +| {{SpecName('CSS1', '#font', '')}} | {{Spec2('CSS1')}} | Définition initiale. | diff --git a/files/fr/web/css/css_fonts/opentype_fonts_guide/index.md b/files/fr/web/css/css_fonts/opentype_fonts_guide/index.md index ed04d4ca73..70da8b93a5 100644 --- a/files/fr/web/css/css_fonts/opentype_fonts_guide/index.md +++ b/files/fr/web/css/css_fonts/opentype_fonts_guide/index.md @@ -9,181 +9,166 @@ tags: translation_of: Web/CSS/CSS_Fonts/OpenType_fonts_guide original_slug: Web/CSS/CSS_Fonts/Guide_caractéristiques_police_OpenType --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p>Les caractéristiques de police ou variantes font référence à différents glyphes ou styles de caractère contenus dans une police OpenType. Cela inclut notamment les ligatures (des caractères spéciaux qui permettent de combiner des caractères entre eux comme œ qui est la ligature entre o et e), le crénage (<em>kerning</em> en anglais) qui définit l'espacement entre certaines lettres, les fractions et styles numériques, etc. Toutes ces caractéristiques sont des caractéristiques OpenType Features et peuvent être utilisées sur le Web grâce à certaines propriétés spécifiques qui permettent un contrôle de bas niveau comme {{cssxref("font-feature-settings")}}. Dans cet article, nous verrons tout ce qu'il faut savoir pour manipuler les caractéristiques OpenType avec CSS.</p> +Les caractéristiques de police ou variantes font référence à différents glyphes ou styles de caractère contenus dans une police OpenType. Cela inclut notamment les ligatures (des caractères spéciaux qui permettent de combiner des caractères entre eux comme œ qui est la ligature entre o et e), le crénage (_kerning_ en anglais) qui définit l'espacement entre certaines lettres, les fractions et styles numériques, etc. Toutes ces caractéristiques sont des caractéristiques OpenType Features et peuvent être utilisées sur le Web grâce à certaines propriétés spécifiques qui permettent un contrôle de bas niveau comme {{cssxref("font-feature-settings")}}. Dans cet article, nous verrons tout ce qu'il faut savoir pour manipuler les caractéristiques OpenType avec CSS. -<p>Pour certaines polices, une ou plusieurs caractéristiques sont activées par défaut (le crénage et les ligatures classiques sont souvent activées par exemple). D'autres caractéristiques sont inactives et peuvent être activées par choix dans certaines situations.</p> +Pour certaines polices, une ou plusieurs caractéristiques sont activées par défaut (le crénage et les ligatures classiques sont souvent activées par exemple). D'autres caractéristiques sont inactives et peuvent être activées par choix dans certaines situations. -<p>En plus des caractéristiques communément utilisées telles que les ligatures ou <a href="https://fr.wikipedia.org/wiki/Chiffres_elz%C3%A9viriens">les chiffres elzéviriens</a>, il existe d'autres caractéristiques spécifiques telles que les ensembles stylistiques, les ensembles alternatifs voire des ensembles avec des altérations spécifiques pour une langue donnée. Pour ce dernier cas, ces altérations sont nécessaires à l'expression correcte du langage et il s'agit donc d'une caractéristique qui dépasse largement l'aspect purement stylistique d'autres caractéristiques.</p> +En plus des caractéristiques communément utilisées telles que les ligatures ou [les chiffres elzéviriens](https://fr.wikipedia.org/wiki/Chiffres_elz%C3%A9viriens), il existe d'autres caractéristiques spécifiques telles que les ensembles stylistiques, les ensembles alternatifs voire des ensembles avec des altérations spécifiques pour une langue donnée. Pour ce dernier cas, ces altérations sont nécessaires à l'expression correcte du langage et il s'agit donc d'une caractéristique qui dépasse largement l'aspect purement stylistique d'autres caractéristiques. -<div class="warning"> -<p><strong>Attention :</strong> Il existe de nombreuses propriétés CSS qui permettent de manipuler les caractéristiques de police. Cependant, la plupart ne sont pas encore complètement implémentées ni prises en charge de façon homogène. Nous les verrons dans cet article mais il faudra la plupart du temps utiliser {{cssxref("font-feature-settings")}} pour les définir à un plus bas niveau. Il est possible d'écrire du CSS qui gère ces deux cas mais c'est plus laborieux. Mais lorsqu'on utilise <code>font-feature-settings</code> pour chaque caractéristique, il est nécessaire de réécrire la chaîne entière même si on ne souhaite changer qu'une caractéristique.</p> -</div> +> **Attention :** Il existe de nombreuses propriétés CSS qui permettent de manipuler les caractéristiques de police. Cependant, la plupart ne sont pas encore complètement implémentées ni prises en charge de façon homogène. Nous les verrons dans cet article mais il faudra la plupart du temps utiliser {{cssxref("font-feature-settings")}} pour les définir à un plus bas niveau. Il est possible d'écrire du CSS qui gère ces deux cas mais c'est plus laborieux. Mais lorsqu'on utilise `font-feature-settings` pour chaque caractéristique, il est nécessaire de réécrire la chaîne entière même si on ne souhaite changer qu'une caractéristique. -<h2 id="Découvrir_la_disponibilité_des_caractéristiques_pour_certaines_polices">Découvrir la disponibilité des caractéristiques pour certaines polices</h2> +## Découvrir la disponibilité des caractéristiques pour certaines polices -<p>Il est parfois délicat de savoir quelles caractéristiques sont disponibles pour une police donnée si celle-ci n'est pas accompagnée d'une documentation (la plupart des fonderies proposeront une page d'exemple et du CSS). Certains sites permettent de contourner ce problème : vous pouvez visiter <a href="https://wakamaifondue.com">wakamaifondue.com</a>, y uploader le fichier de la police et recevoir un rapport complet peu de temps après ; le site <a href="https://axis-praxis.org">Axis-praxis.org</a> fournit des fonctionnalités analogues et permet de cliquer pour activer/désactiver une ou plusieurs caractéristiques sur un bloc de texte donné.</p> +Il est parfois délicat de savoir quelles caractéristiques sont disponibles pour une police donnée si celle-ci n'est pas accompagnée d'une documentation (la plupart des fonderies proposeront une page d'exemple et du CSS). Certains sites permettent de contourner ce problème : vous pouvez visiter [wakamaifondue.com](https://wakamaifondue.com), y uploader le fichier de la police et recevoir un rapport complet peu de temps après ; le site [Axis-praxis.org](https://axis-praxis.org) fournit des fonctionnalités analogues et permet de cliquer pour activer/désactiver une ou plusieurs caractéristiques sur un bloc de texte donné. -<h2 id="Pourquoi_utiliser_les_caractéristiques_d'une_police">Pourquoi utiliser les caractéristiques d'une police ?</h2> +## Pourquoi utiliser les caractéristiques d'une police ? -<p>Étant donné que ces caractéristiques peuvent être difficilement accessibles, on peut légitiement se demander pourquoi il faudrait les utiliser. Pour répondre à cette question, il faut voir comment ces caractéristiques peuvent aider à rendre un site plus lisible, accessible, élégant :</p> +Étant donné que ces caractéristiques peuvent être difficilement accessibles, on peut légitiement se demander pourquoi il faudrait les utiliser. Pour répondre à cette question, il faut voir comment ces caractéristiques peuvent aider à rendre un site plus lisible, accessible, élégant : -<ul> - <li><strong>Les ligatures</strong> telles que œ ou celles qui existent entre 'ff' répartissent plus également l'espace entre les lettres et permettent un lecture plus douce.</li> - <li><strong>Les fractions</strong> permettent d'améliorer la compréhension et la lecture de certains textes (des recettes par exemple).</li> - <li><strong>L'écriture des nombres</strong> au sein de paragraphes qui suivent la ligne de base du texte ou au contraire dont les jambages passent sous la ligne de base.</li> -</ul> +- **Les ligatures** telles que œ ou celles qui existent entre 'ff' répartissent plus également l'espace entre les lettres et permettent un lecture plus douce. +- **Les fractions** permettent d'améliorer la compréhension et la lecture de certains textes (des recettes par exemple). +- **L'écriture des nombres** au sein de paragraphes qui suivent la ligne de base du texte ou au contraire dont les jambages passent sous la ligne de base. -<p>Bien qu'aucune de ces caractéristiques ne soit critique pour l'utilisabilité d'un site, chacune d'elle peut rendre un site plus lisible voire raffiné</p> +Bien qu'aucune de ces caractéristiques ne soit critique pour l'utilisabilité d'un site, chacune d'elle peut rendre un site plus lisible voire raffiné -<blockquote> -<p>Les caractéristiques OpenType ressemblent à des compartiments secrets : en les déverouillant, une police peut évoluer de façon subtile ou complète. Toutes les caractéristiques OpenType ne doivent pas être utilisées tout le temps mais certaines d'entre elles sont majeures pour obtenir une typographie de premier rang. <em>Tim Brown, Directeur de la typographie chez Adobe</em>.</p> -</blockquote> +> Les caractéristiques OpenType ressemblent à des compartiments secrets : en les déverouillant, une police peut évoluer de façon subtile ou complète. Toutes les caractéristiques OpenType ne doivent pas être utilisées tout le temps mais certaines d'entre elles sont majeures pour obtenir une typographie de premier rang. _Tim Brown, Directeur de la typographie chez Adobe_. -<h3 id="Au-delà_du_style_le_contenu_même">Au-delà du style : le contenu même</h3> +### Au-delà du style : le contenu même -<p>Il existe certains cas (notamment avec {{cssxref("font-variant-east-asian")}}) où les caractéristiques OpenType sont directement liées à l'utilisation de formes différentes pour certains glyphes. Ces caractéristiques auront un impact sur la lisibilité mais aussi et surtout sur la signification du texte. Dans ces cas, les caractéristiques de police ne sont pas un outil de style mais font partie intégrante du contenu.</p> +Il existe certains cas (notamment avec {{cssxref("font-variant-east-asian")}}) où les caractéristiques OpenType sont directement liées à l'utilisation de formes différentes pour certains glyphes. Ces caractéristiques auront un impact sur la lisibilité mais aussi et surtout sur la signification du texte. Dans ces cas, les caractéristiques de police ne sont pas un outil de style mais font partie intégrante du contenu. -<h2 id="Les_caractéristiques">Les caractéristiques</h2> +## Les caractéristiques -<p>Il existe une variété de caractéristiques. Nous les avons ici regroupées selon leurs attributs principaux et les options développées dans les spécifications du W3C.</p> +Il existe une variété de caractéristiques. Nous les avons ici regroupées selon leurs attributs principaux et les options développées dans les spécifications du W3C. -<div class="note"> -<p><strong>Note :</strong> Les exemples qui suivent illustrent certaines propriétés et des combinaisons d'exemple et sont accompagnés des équivalents utilisant la syntaxe de plus bas niveau. Il est possible que ces deux versions d'exemple ne correspondent pas exactement selon l'implémentation des navigateurs. Les polices utilisées ici sont Playfair Display, Source Serif Pro, IBM Plex Serif, Dancing Script et Kokoro (qui sont libres d'utilisation et disponibles via différents services tels que Google Fonts).</p> -</div> +> **Note :** Les exemples qui suivent illustrent certaines propriétés et des combinaisons d'exemple et sont accompagnés des équivalents utilisant la syntaxe de plus bas niveau. Il est possible que ces deux versions d'exemple ne correspondent pas exactement selon l'implémentation des navigateurs. Les polices utilisées ici sont Playfair Display, Source Serif Pro, IBM Plex Serif, Dancing Script et Kokoro (qui sont libres d'utilisation et disponibles via différents services tels que Google Fonts). -<h3 id="Le_crénage_(kerning)_(cssxref(font-kerning))">Le crénage (<em>kerning</em>) ({{cssxref("font-kerning")}})</h3> +### Le crénage (_kerning_) ({{cssxref("font-kerning")}}) -<p>Le crénage correspond à l'espace entre les caractères pour certaines combinaisons de caractères. Cette caractéristique, comme recommandé par la spécification OpenType, est généralement activée par défaut. On notera également que la propriété {{cssxref("letter-spacing")}} permet d'imposer un crénage supplémentaire au texte.</p> +Le crénage correspond à l'espace entre les caractères pour certaines combinaisons de caractères. Cette caractéristique, comme recommandé par la spécification OpenType, est généralement activée par défaut. On notera également que la propriété {{cssxref("letter-spacing")}} permet d'imposer un crénage supplémentaire au texte. -<div>{{EmbedGHLiveSample("css-examples/font-features/font-kerning.html", '100%', 520)}}</div> +{{EmbedGHLiveSample("css-examples/font-features/font-kerning.html", '100%', 520)}} -<h3 id="Les_formes_alternatives_(cssxref(font-variant-alternates))">Les formes alternatives ({{cssxref("font-variant-alternates")}})</h3> +### Les formes alternatives ({{cssxref("font-variant-alternates")}}) -<p>Les polices peuvent fournir différentes formes pour différents glyphes. Cette propriété permet d'activer un ensemble de formes alternatives ou une forme alternative spécifique selon la valeur utilisée. Dans l'exemple qui suit, on voit différentes formes d'utilisation des caractères alternatifs. Les polices qui possèdent des glyphes alternatifs peuvent les rendre disponibles sur la grille de caractères ou dans des ensembles stylistiques séparés voire pour des caractères individuels. Dans cet exemple, on utilise deux polices et la règle-@ {{cssxref("@font-feature-values")}}. Cette méthode permet de définir des raccourcis ou des options nommées qui peuvent ensuite être utilisée sur un ensemble de polices. Ainsi, on peut avoir une option appliquée à une police ou appliquée plus généralement.</p> +Les polices peuvent fournir différentes formes pour différents glyphes. Cette propriété permet d'activer un ensemble de formes alternatives ou une forme alternative spécifique selon la valeur utilisée. Dans l'exemple qui suit, on voit différentes formes d'utilisation des caractères alternatifs. Les polices qui possèdent des glyphes alternatifs peuvent les rendre disponibles sur la grille de caractères ou dans des ensembles stylistiques séparés voire pour des caractères individuels. Dans cet exemple, on utilise deux polices et la règle-@ {{cssxref("@font-feature-values")}}. Cette méthode permet de définir des raccourcis ou des options nommées qui peuvent ensuite être utilisée sur un ensemble de polices. Ainsi, on peut avoir une option appliquée à une police ou appliquée plus généralement. -<div>{{EmbedGHLiveSample("css-examples/font-features/font-variant-alternates.html", '100%', 800)}}</div> +{{EmbedGHLiveSample("css-examples/font-features/font-variant-alternates.html", '100%', 800)}} Dans ce cas, `@stylistic(alternates)` affichera tous les caractères alternatifs pour chacune des polices. En appliquant uniquement ces règles au mot 'My', seul l'affichage de la lettre 'M' est modifié. Si on applique `@styleset(alt-a)`, seule l'apparence de la lettre a minuscule changera. -<div> </div> +Vous pouvez modifier : -<div>Dans ce cas, <code>@stylistic(alternates)</code> affichera tous les caractères alternatifs pour chacune des polices. En appliquant uniquement ces règles au mot 'My', seul l'affichage de la lettre 'M' est modifié. Si on applique <code>@styleset(alt-a)</code>, seule l'apparence de la lettre a minuscule changera.</div> +```css +font-variant-alternates: styleset(alt-a); +``` -<p>Vous pouvez modifier :</p> +en : -<pre class="brush: css">font-variant-alternates: styleset(alt-a);</pre> +```css +font-variant-alternates: styleset(alt-g); +``` -<p>en :</p> +et voir comment la lettre a retrouve sa forme normale et comment la lettre g est modifiée. -<pre class="brush: css">font-variant-alternates: styleset(alt-g); -</pre> +#### En savoir plus sur les formes alternatives -<p>et voir comment la lettre a retrouve sa forme normale et comment la lettre g est modifiée.</p> +- [Lien vers la spécification de la propriété `font-variant-alternates`](https://www.w3.org/TR/css-fonts-4/#propdef-font-variant-alternates) +- {{cssxref("font-variante-alternates")}} -<h4 id="En_savoir_plus_sur_les_formes_alternatives">En savoir plus sur les formes alternatives</h4> +### Les ligatures ({{cssxref("font-variant-ligatures")}}) -<ul> - <li><a href="https://www.w3.org/TR/css-fonts-4/#propdef-font-variant-alternates">Lien vers la spécification de la propriété <code>font-variant-alternates</code></a></li> - <li>{{cssxref("font-variante-alternates")}}</li> -</ul> +Les ligatures sont des glyphes qui remplacent deux ou plusieurs glyphes afin de les représenter de façon plus harmonieuse (pour l'espacement et l'esthétique notamment). Certaines de ces ligatures sont fréquemment utilisées (œ) et d'autres sont plus spécialisées et moins usitées (on parle de « ligatures discrétionaires », de « ligatures historiques » ou encore d' « alternatifs contextuels »). -<h3 id="Les_ligatures_(cssxref(font-variant-ligatures))">Les ligatures ({{cssxref("font-variant-ligatures")}})</h3> +Bien qu'elles soient plus fréquemment utilisées avec les polices d'écriture, dans l'exemple qui suit, on les utilise afin de créer des flèches : -<p>Les ligatures sont des glyphes qui remplacent deux ou plusieurs glyphes afin de les représenter de façon plus harmonieuse (pour l'espacement et l'esthétique notamment). Certaines de ces ligatures sont fréquemment utilisées (œ) et d'autres sont plus spécialisées et moins usitées (on parle de « ligatures discrétionaires », de « ligatures historiques » ou encore d' « alternatifs contextuels »).</p> +{{EmbedGHLiveSample("css-examples/font-features/font-variant-ligatures.html", '100%', 540)}} -<p>Bien qu'elles soient plus fréquemment utilisées avec les polices d'écriture, dans l'exemple qui suit, on les utilise afin de créer des flèches :</p> +### Les positions ({{cssxref("font-variant-position")}}) -<div>{{EmbedGHLiveSample("css-examples/font-features/font-variant-ligatures.html", '100%', 540)}}</div> +Les variantes de positions permettent d'activer le support typographique des glyphes pour les exposants et les indices. Celles-ci sont utilisées dans le texte sans modifier la ligne de base ou l'interlignage (c'est un des avantages par rapport à l'utilisation des éléments HTML {{htmlelement("sub")}} et {{cssxref("sup")}}). -<h3 id="Les_positions_(cssxref(font-variant-position))">Les positions ({{cssxref("font-variant-position")}})</h3> +{{EmbedGHLiveSample("css-examples/font-features/font-variant-position.html", '100%', 550)}} -<p>Les variantes de positions permettent d'activer le support typographique des glyphes pour les exposants et les indices. Celles-ci sont utilisées dans le texte sans modifier la ligne de base ou l'interlignage (c'est un des avantages par rapport à l'utilisation des éléments HTML {{htmlelement("sub")}} et {{cssxref("sup")}}).</p> +### Les capitales ({{cssxref("font-variant-caps")}}) -<div>{{EmbedGHLiveSample("css-examples/font-features/font-variant-position.html", '100%', 550)}}</div> +Une utilisation fréquente des caractéristiques OpenType est l'activation de « vraies » [petites capitales](https://fr.wikipedia.org/wiki/Petite_capitale) qui sont généralement utilisées pour les acronymes et les abréviations. -<h3 id="Les_capitales_(cssxref(font-variant-caps))">Les capitales ({{cssxref("font-variant-caps")}})</h3> +{{EmbedGHLiveSample("css-examples/font-features/font-variant-caps.html", '100%', 620)}} -<p>Une utilisation fréquente des caractéristiques OpenType est l'activation de « vraies » <a href="https://fr.wikipedia.org/wiki/Petite_capitale">petites capitales</a> qui sont généralement utilisées pour les acronymes et les abréviations.</p> +### Les chiffres ({{cssxref("font-variant-numeric")}}) -<div>{{EmbedGHLiveSample("css-examples/font-features/font-variant-caps.html", '100%', 620)}}</div> +Il existe généralement différents types de chiffre dans les polices : -<h3 id="Les_chiffres_(cssxref(font-variant-numeric))">Les chiffres ({{cssxref("font-variant-numeric")}})</h3> +- Les chiffres classiques (ou chiffres Didot) qui sont alignées sur la ligne de base du texte et qui ont la même hauteur que les majuscules +- [Les chiffres elzéviriens](https://fr.wikipedia.org/wiki/Chiffres_elz%C3%A9viriens) qui ont des jambages et des hampes à la façon des autres lettres minuscules. Ces chiffres sont conçus pour être utilisés en incise et se « fondre » au sein des glyphes alentours, à la manières des petites capitales. -<p>Il existe généralement différents types de chiffre dans les polices :</p> +On y retrouve également la notion d'espacement. L'espacement proportionnel est le réglage par défaut et l'espacement tabulaire permet d'avoir un espace identique entre chaque chiffre, quelle que soit la largeur du caractère. Ce dernier mode est notamment utile pour l'affichage de nombre dans des tableaux (où on peut souhaiter comparer des montants d'une ligne à l'autre). -<ul> - <li>Les chiffres classiques (ou chiffres Didot) qui sont alignées sur la ligne de base du texte et qui ont la même hauteur que les majuscules</li> - <li><a href="https://fr.wikipedia.org/wiki/Chiffres_elz%C3%A9viriens">Les chiffres elzéviriens</a> qui ont des jambages et des hampes à la façon des autres lettres minuscules. Ces chiffres sont conçus pour être utilisés en incise et se « fondre » au sein des glyphes alentours, à la manières des petites capitales.</li> -</ul> +Deux types de fractions peuvent être prises en charge avec cette propriété : -<p>On y retrouve également la notion d'espacement. L'espacement proportionnel est le réglage par défaut et l'espacement tabulaire permet d'avoir un espace identique entre chaque chiffre, quelle que soit la largeur du caractère. Ce dernier mode est notamment utile pour l'affichage de nombre dans des tableaux (où on peut souhaiter comparer des montants d'une ligne à l'autre).</p> +- Les fractions avec barre diagonale. +- Les fractions empilées verticalement. -<p>Deux types de fractions peuvent être prises en charge avec cette propriété :</p> +Les nombres ordinaux peuvent également être pris en charge (« 1er », « 2e ») s'ils sont présents dans la police. De même on peut utiliser un zéro barré si celui-ci est disponible. -<ul> - <li>Les fractions avec barre diagonale.</li> - <li>Les fractions empilées verticalement.</li> -</ul> +#### Chiffres classiques et chiffres elzéviriens -<p>Les nombres ordinaux peuvent également être pris en charge (« 1er », « 2e ») s'ils sont présents dans la police. De même on peut utiliser un zéro barré si celui-ci est disponible.</p> +{{EmbedGHLiveSample("css-examples/font-features/font-variant-numeric.html", '100%', 560)}} -<h4 id="Chiffres_classiques_et_chiffres_elzéviriens">Chiffres classiques et chiffres elzéviriens</h4> +#### Fractions, nombres ordinaux et zéro barré -<div>{{EmbedGHLiveSample("css-examples/font-features/font-variant-numeric.html", '100%', 560)}}</div> +{{EmbedGHLiveSample("css-examples/font-features/font-variant-numeric-frac.html", '100%', 600)}} -<h4 id="Fractions_nombres_ordinaux_et_zéro_barré">Fractions, nombres ordinaux et zéro barré</h4> +### Caractères d'Asie orientale ({{cssxref("font-variant-east-asian")}}) -<div>{{EmbedGHLiveSample("css-examples/font-features/font-variant-numeric-frac.html", '100%', 600)}}</div> +Cette caractéristique permet d'accéder à différentes formes alternatives de glyphes dans une police. L'exemple qui suit illustre une chaîne de glyphes où seul l'ensemble OpenType 'jis78' est activé. Vous pouvez décocher la case et voir alors d'autres caractères s'afficher. -<h3 id="Caractères_d'Asie_orientale_(cssxref(font-variant-east-asian))">Caractères d'Asie orientale ({{cssxref("font-variant-east-asian")}})</h3> +{{EmbedGHLiveSample("css-examples/font-features/font-variant-east-asian.html", '100%', 750)}} -<p>Cette caractéristique permet d'accéder à différentes formes alternatives de glyphes dans une police. L'exemple qui suit illustre une chaîne de glyphes où seul l'ensemble OpenType 'jis78' est activé. Vous pouvez décocher la case et voir alors d'autres caractères s'afficher.</p> +> **Note :** Ces glyphes ont été copiés à partir d'un exemple et le texte qu'ils constituent n'ont aucun sens particulier. -<div>{{EmbedGHLiveSample("css-examples/font-features/font-variant-east-asian.html", '100%', 750)}}</div> +### Propriété raccourcie ({{Cssxref("font-variant")}}) -<div class="note"> -<p><strong>Note :</strong> Ces glyphes ont été copiés à partir d'un exemple et le texte qu'ils constituent n'ont aucun sens particulier.</p> -</div> +La propriété raccourcie `font-variant` permet de définir l'ensemble des caractéristiques précédentes. Lorsqu'on utilise la valeur `normal`, toutes les caractéristiques sont réinitialisées et retrouvent leurs valeurs par défaut. En utilisant `none`, `font-variant-ligatures` vaudra `none` et toutes les autres propriétés récupèreront leurs valeurs initiales (cela signifie entre autres que si le crénage est activé par défaut, il sera toujours activé, même lorsque `none` est fourni). -<h3 id="Propriété_raccourcie_(Cssxref(font-variant))">Propriété raccourcie ({{Cssxref("font-variant")}})</h3> +{{EmbedGHLiveSample("css-examples/font-features/font-variant.html", '100%', 600)}} -<p>La propriété raccourcie <code>font-variant</code> permet de définir l'ensemble des caractéristiques précédentes. Lorsqu'on utilise la valeur <code>normal</code>, toutes les caractéristiques sont réinitialisées et retrouvent leurs valeurs par défaut. En utilisant <code>none</code>, <code>font-variant-ligatures</code> vaudra <code>none</code> et toutes les autres propriétés récupèreront leurs valeurs initiales (cela signifie entre autres que si le crénage est activé par défaut, il sera toujours activé, même lorsque <code>none</code> est fourni).</p> +## Utiliser `font-feature-settings` -<div>{{EmbedGHLiveSample("css-examples/font-features/font-variant.html", '100%', 600)}}</div> +La propriété {{cssxref("font-feature-settings")}} permet d'utiliser une syntaxe « bas niveau » qui permet un accès explicite à chaque caractéristique OpenType disponible. On dispose ainsi d'un contrôle accru mais on perd l'héritage et il faut tout redéclarer à chaque fois qu'on souhaite modifier une caractéristique (sauf à utiliser [des propriétés CSS personnalisées](/en-US/docs/Web/CSS/Using_CSS_custom_properties) afin de définir les valeurs). Aussi, mieux vaut utiliser les propriétés standards lorsque c'est possible. -<h2 id="Utiliser_font-feature-settings">Utiliser <code>font-feature-settings</code></h2> +Il existe une myriade de caractéristiques possibles. Vous pouvez en voir quelques exemples ici et il existe plusieurs ressources pour en exploiter d'autres. -<p>La propriété {{cssxref("font-feature-settings")}} permet d'utiliser une syntaxe « bas niveau » qui permet un accès explicite à chaque caractéristique OpenType disponible. On dispose ainsi d'un contrôle accru mais on perd l'héritage et il faut tout redéclarer à chaque fois qu'on souhaite modifier une caractéristique (sauf à utiliser <a href="/en-US/docs/Web/CSS/Using_CSS_custom_properties">des propriétés CSS personnalisées</a> afin de définir les valeurs). Aussi, mieux vaut utiliser les propriétés standards lorsque c'est possible.</p> +La syntaxe générale suivra cette structure : -<p>Il existe une myriade de caractéristiques possibles. Vous pouvez en voir quelques exemples ici et il existe plusieurs ressources pour en exploiter d'autres.</p> - -<p>La syntaxe générale suivra cette structure :</p> - -<pre class="brush: css">.small-caps { +```css +.small-caps { font-feature-settings: "smcp", "c2sc"; } -</pre> +``` -<p>Selon la spécification, on peut fournir le code à quatre caractères de la caractéristique ou fournir le code suivi d'un 1 pour activer la fonctionnalité ou suivi d'un 0 pour la désactiver. Ainsi, si on dispose de caractéristiques liées à la ligatures et qui sont activées par défaut, on peut les désactiver de la façon suivante :</p> +Selon la spécification, on peut fournir le code à quatre caractères de la caractéristique ou fournir le code suivi d'un 1 pour activer la fonctionnalité ou suivi d'un 0 pour la désactiver. Ainsi, si on dispose de caractéristiques liées à la ligatures et qui sont activées par défaut, on peut les désactiver de la façon suivante : -<pre class="brush: css">.no-ligatures { +```css +.no-ligatures { font-feature-settings: "liga" 0, "dlig" 0; -}</pre> +} +``` -<h4 id="En_savoir_plus_sur_les_codes_des_caractéristiques_font-feature-settings">En savoir plus sur les codes des caractéristiques <code>font-feature-settings</code></h4> +#### En savoir plus sur les codes des caractéristiques `font-feature-settings` -<ul> - <li><a href="https://sparanoid.com/lab/opentype-features/">Une démonstration des caractéristiques OpenType</a></li> - <li><a href="https://en.wikipedia.org/wiki/List_of_typographic_features">La liste des caractéristiques OpenType sur Wikipédia</a></li> -</ul> +- [Une démonstration des caractéristiques OpenType](https://sparanoid.com/lab/opentype-features/) +- [La liste des caractéristiques OpenType sur Wikipédia](https://en.wikipedia.org/wiki/List_of_typographic_features) -<h2 id="Utiliser_la_détection_de_fonctionnalités_CSS">Utiliser la détection de fonctionnalités CSS</h2> +## Utiliser la détection de fonctionnalités CSS -<p>Étant donné que toutes les propriétés ne sont pas implémentées de façon homogène, il est préférable d'utiliser la règle @ {{cssxref("@supports")}} pour vérifier quelles propriétés peuvent être utilisées correctement et s'en remettre à {{cssxref("font-feature-settings")}} si nécessaire.</p> +Étant donné que toutes les propriétés ne sont pas implémentées de façon homogène, il est préférable d'utiliser la règle @ {{cssxref("@supports")}} pour vérifier quelles propriétés peuvent être utilisées correctement et s'en remettre à {{cssxref("font-feature-settings")}} si nécessaire. -<p>Ainsi, les petites capitales peuvent être activées de différentes façons mais si on veut s'assurer que la mise en forme fonctionne quelle que soit la capitalisation, il faudra 2 paramètres avec <code>font-feature-settings</code> et une seule valeur pour {{cssxref("font-variant-caps")}}.</p> +Ainsi, les petites capitales peuvent être activées de différentes façons mais si on veut s'assurer que la mise en forme fonctionne quelle que soit la capitalisation, il faudra 2 paramètres avec `font-feature-settings` et une seule valeur pour {{cssxref("font-variant-caps")}}. -<pre class="brush: css">.small-caps { +```css +.small-caps { font-feature-settings: "smcp", "c2sc"; } @@ -193,38 +178,27 @@ original_slug: Web/CSS/CSS_Fonts/Guide_caractéristiques_police_OpenType font-variant-caps: all-small-caps; } } -</pre> +``` -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<h3 id="Démonstrations_de_caractéristiques_OpenType_en_CSS">Démonstrations de caractéristiques OpenType en CSS</h3> +### Démonstrations de caractéristiques OpenType en CSS -<ul> - <li><a href="https://sparanoid.com/lab/opentype-features/">Démonstration CSS complète des caractéristiques OpenType (en anglais)</a> +- [Démonstration CSS complète des caractéristiques OpenType (en anglais)](https://sparanoid.com/lab/opentype-features/) - <ul> - <li>Note : la complétude invoquée dans le titre n'est pas garantie…</li> - </ul> - </li> -</ul> + - Note : la complétude invoquée dans le titre n'est pas garantie… -<h3 id="Outils_web_d'analyse_de_polices">Outils web d'analyse de polices</h3> +### Outils web d'analyse de polices -<ul> - <li><a href="https://wakamaifondue.com">Wakamai Fondue (en anglais)</a></li> - <li><a href="https://axis-praxis.org">Axis Praxis (en anglais)</a></li> -</ul> +- [Wakamai Fondue (en anglais)](https://wakamaifondue.com) +- [Axis Praxis (en anglais)](https://axis-praxis.org) -<h3 id="Spécifications_W3C">Spécifications W3C</h3> +### Spécifications W3C -<ul> - <li><a href="https://drafts.csswg.org/css-fonts-3/#font-rend-props">Les propriétés relatives aux caractéristiques de police dans le module CSS Fonts de niveau 3 (en anglais)</a></li> - <li><a href="https://www.w3.org/TR/css-fonts-4/#propdef-font-variant-alternates"><code>font-variant-alternatives</code>, spécifiée dans le module CSS Fonts de niveau 4 (en anglais)</a></li> -</ul> +- [Les propriétés relatives aux caractéristiques de police dans le module CSS Fonts de niveau 3 (en anglais)](https://drafts.csswg.org/css-fonts-3/#font-rend-props) +- [`font-variant-alternatives`, spécifiée dans le module CSS Fonts de niveau 4 (en anglais)](https://www.w3.org/TR/css-fonts-4/#propdef-font-variant-alternates) -<h3 id="Autres_ressources">Autres ressources</h3> +### Autres ressources -<ul> - <li><a href="https://helpx.adobe.com/fonts/using/use-open-type-features.html">Utiliser les caractéristiques OpenType (en anglais)</a>, écrit par Tim Brown</li> - <li><a href="https://helpx.adobe.com/fonts/using/open-type-syntax.html">La syntaxe Adobe pour les caractéristiques OpenType en CSS (en anglais)</a></li> -</ul> +- [Utiliser les caractéristiques OpenType (en anglais)](https://helpx.adobe.com/fonts/using/use-open-type-features.html), écrit par Tim Brown +- [La syntaxe Adobe pour les caractéristiques OpenType en CSS (en anglais)](https://helpx.adobe.com/fonts/using/open-type-syntax.html) diff --git a/files/fr/web/css/css_fonts/variable_fonts_guide/index.md b/files/fr/web/css/css_fonts/variable_fonts_guide/index.md index 487a4b1948..c8f7e28163 100644 --- a/files/fr/web/css/css_fonts/variable_fonts_guide/index.md +++ b/files/fr/web/css/css_fonts/variable_fonts_guide/index.md @@ -9,231 +9,229 @@ tags: translation_of: Web/CSS/CSS_Fonts/Variable_Fonts_Guide original_slug: Web/CSS/CSS_Fonts/Guide_polices_variables --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><strong>Les polices variables</strong> sont une évolution de la spécification OpenType et qui permet d'activer différentes variations d'une police dans un seul fichier plutôt que d'avoir différents fichiers pour chaque taille, graisse ou style. En CSS, on peut accéder à l'ensemble des variations en utilisant une seule référence {{cssxref("@font-face")}}. Dans cet article, nous verrons tout ce qu'il faut savoir pour commencer à utiliser les polices variables.</p> +**Les polices variables** sont une évolution de la spécification OpenType et qui permet d'activer différentes variations d'une police dans un seul fichier plutôt que d'avoir différents fichiers pour chaque taille, graisse ou style. En CSS, on peut accéder à l'ensemble des variations en utilisant une seule référence {{cssxref("@font-face")}}. Dans cet article, nous verrons tout ce qu'il faut savoir pour commencer à utiliser les polices variables. -<div class="warning"> -<p><strong>Attention :</strong> Afin d'utiliser les polices variables, il faut s'assurer que son système d'exploitation est à jour. Pour les systèmes basés sur GNU/Linux, il faut la version la plus récente de Linux Freetype. Pour macOS, les versions antérieures à 10.13 ne prennent pas en charge les polices variables. Si votre système d'exploitation n'est pas à jour ou ne prend pas en charge les polices variables, vous ne pourrez pas en bénéficier sur le Web ou dans les outils de développement Firefox par exemple.</p> -</div> +> **Attention :** Afin d'utiliser les polices variables, il faut s'assurer que son système d'exploitation est à jour. Pour les systèmes basés sur GNU/Linux, il faut la version la plus récente de Linux Freetype. Pour macOS, les versions antérieures à 10.13 ne prennent pas en charge les polices variables. Si votre système d'exploitation n'est pas à jour ou ne prend pas en charge les polices variables, vous ne pourrez pas en bénéficier sur le Web ou dans les outils de développement Firefox par exemple. -<h2 id="Qu'est-ce_qu'une_police_variable">Qu'est-ce qu'une police variable ?</h2> +## Qu'est-ce qu'une police variable ? -<p>Pour mieux comprendre le fonctionnement des polices variables, revenons sur les polices « statiques » et comparons les deux systèmes.</p> +Pour mieux comprendre le fonctionnement des polices variables, revenons sur les polices « statiques » et comparons les deux systèmes. -<h3 id="Les_polices_standard_ou_polices_statiques">Les polices standard ou polices statiques</h3> +### Les polices standard ou polices statiques -<p>Auparavant, une police de caractères était représentées par différents fichiers pour les différentes fontes. Aussi, on avait par exemple différents fichiers pour 'Roboto Regular', 'Roboto Bold' et 'Roboto Bold Italic' et on pouvait avoir 20 à 30 fichiers distincts pour représenter l'intégralité d'une police.</p> +Auparavant, une police de caractères était représentées par différents fichiers pour les différentes fontes. Aussi, on avait par exemple différents fichiers pour 'Roboto Regular', 'Roboto Bold' et 'Roboto Bold Italic' et on pouvait avoir 20 à 30 fichiers distincts pour représenter l'intégralité d'une police. -<p>Avec un tel scénario et pour utiliser une police de façon classique sur un site, il fallait au moins quatre fichier pour les différents styles : normal, italique, gras et gras-italique. Si on souhaitait ajouter un autre niveau de graisse (par exemple une fonte plus légère pour les légendes), il fallait rajouter un fichier. Sur le réseau, cela se traduisait par d'autres requêtes HTTP et plus de données téléchargées (environ 20Ko pour chaque fichier).</p> +Avec un tel scénario et pour utiliser une police de façon classique sur un site, il fallait au moins quatre fichier pour les différents styles : normal, italique, gras et gras-italique. Si on souhaitait ajouter un autre niveau de graisse (par exemple une fonte plus légère pour les légendes), il fallait rajouter un fichier. Sur le réseau, cela se traduisait par d'autres requêtes HTTP et plus de données téléchargées (environ 20Ko pour chaque fichier). -<h3 id="Les_polices_variables">Les polices variables</h3> +### Les polices variables -<p>Avec une police variable, toutes ces combinaisons de style et de graisse sont contenues dans un seul fichier. On a donc un fichier plus gros qu'un fichier de police classique mais dont la taille est inférieure ou proche de celle des 4 fichiers qu'on chargerait pour la police principale d'un site. L'avantage d'une police variable est qu'on peut accéder à l'intégralité des corps, graisses et italiques sans être plus contraint par ceux du ou des fichiers chargés séparément.</p> +Avec une police variable, toutes ces combinaisons de style et de graisse sont contenues dans un seul fichier. On a donc un fichier plus gros qu'un fichier de police classique mais dont la taille est inférieure ou proche de celle des 4 fichiers qu'on chargerait pour la police principale d'un site. L'avantage d'une police variable est qu'on peut accéder à l'intégralité des corps, graisses et italiques sans être plus contraint par ceux du ou des fichiers chargés séparément. -<p>Cela permet d'utiliser des techniques typographiques classiques pour avoir des niveaux de titre avec différents corps, d'utiliser une fonte plus étroite lorsqu'il y a plus de données à afficher, etc. Dans un magazine, par exemple, il n'est pas rare d'avoir un système typographique qui utilise 10 à 15 fontes qui sont autant de combinaisons de corps et de graisse.</p> +Cela permet d'utiliser des techniques typographiques classiques pour avoir des niveaux de titre avec différents corps, d'utiliser une fonte plus étroite lorsqu'il y a plus de données à afficher, etc. Dans un magazine, par exemple, il n'est pas rare d'avoir un système typographique qui utilise 10 à 15 fontes qui sont autant de combinaisons de corps et de graisse. -<h4 id="Quelques_notes_à_propos_des_familles_de_polices_des_corps_et_des_variantes">Quelques notes à propos des familles de polices, des corps et des variantes</h4> +#### Quelques notes à propos des familles de polices, des corps et des variantes -<p>On a mentionné avant qu'on avait différents fichiers pour chaque graisse et italique et qu'on ne demandait pas au navigateur de synthétiser ces aspects. En effet, la plupart des polices ont des dessins spécifiques pour chaque graisse et chaque niveau d'italique (le a et le g minuscule sont souvent assez différents en italique par exemple). Afin de respecter ces spécificités et d'éviter les différences entre les implémentations des navigateurs, on préfèrera charger les fichiers correspondant à chaque graisse / italique lorsqu'on n'utilise pas de police variable.</p> +On a mentionné avant qu'on avait différents fichiers pour chaque graisse et italique et qu'on ne demandait pas au navigateur de synthétiser ces aspects. En effet, la plupart des polices ont des dessins spécifiques pour chaque graisse et chaque niveau d'italique (le a et le g minuscule sont souvent assez différents en italique par exemple). Afin de respecter ces spécificités et d'éviter les différences entre les implémentations des navigateurs, on préfèrera charger les fichiers correspondant à chaque graisse / italique lorsqu'on n'utilise pas de police variable. -<p>Vous pourrez aussi remarquer que certaines polices viennent avec deux fichiers : un contenant les caractères sans italique et leurs variations et un autre contenant les variations italiques. Cette méthode est parfois choisie afin de réduire la taille du fichier lorsqu'on n'a pas besoin des italiques. Dans tous les cas, il est toujours possible de les lier avec un nom {{cssxref("font-family")}} et d'appeler chaque style avec la valeur pertinente pour {{cssxref("font-style")}}.</p> +Vous pourrez aussi remarquer que certaines polices viennent avec deux fichiers : un contenant les caractères sans italique et leurs variations et un autre contenant les variations italiques. Cette méthode est parfois choisie afin de réduire la taille du fichier lorsqu'on n'a pas besoin des italiques. Dans tous les cas, il est toujours possible de les lier avec un nom {{cssxref("font-family")}} et d'appeler chaque style avec la valeur pertinente pour {{cssxref("font-style")}}. -<h2 id="L'axe_de_variation">L'axe de variation</h2> +## L'axe de variation -<p>Le concept clé des polices variables est celui d'<strong>axe de variation</strong> qui décrit l'intervalle autorisé pour faire varier un aspect donné d'une police. Ainsi, l'axe de la graisse décrit l'étendue entre les caractères les plus fins et les plus gras qui puissent être ; l'axe de la largeur parcourt l'étroitesse ou la largeur de la police ; l'axe italique décrit si des formes italiques sont présentes, etc. Un axe peut être un intervalle ou un choix binaire. Ainsi, la graisse pourra varier entre 1 et 999 tandis que l'italique pourrait être uniquement activable ou désactivable (1 ou 0 respectivement).</p> +Le concept clé des polices variables est celui d'**axe de variation** qui décrit l'intervalle autorisé pour faire varier un aspect donné d'une police. Ainsi, l'axe de la graisse décrit l'étendue entre les caractères les plus fins et les plus gras qui puissent être ; l'axe de la largeur parcourt l'étroitesse ou la largeur de la police ; l'axe italique décrit si des formes italiques sont présentes, etc. Un axe peut être un intervalle ou un choix binaire. Ainsi, la graisse pourra varier entre 1 et 999 tandis que l'italique pourrait être uniquement activable ou désactivable (1 ou 0 respectivement). -<p>Comme indiqué dans la spécification, deux types d'axe existent : <strong>les axes enregistrés</strong> et <strong>les axes spécifiques</strong> (<em>custom axes</em>) :</p> +Comme indiqué dans la spécification, deux types d'axe existent : **les axes enregistrés** et **les axes spécifiques** (_custom axes_) : -<ul> - <li> - <p>Les axes enregistrés sont ceux que l'on rencontre le plus souvent et qui ont donc été standardisés dans la spécification. À l'heure actuelle, il existe 5 axes enregistrés : le corps, la largeur, la pente, l'italique et la taille optique. Chacun de ces axes possède un attribut CSS correspondant.</p> - </li> - <li> - <p>Les axes spécifiques peuvent être n'importe quel axe défini par le concepteur de la police. Chaque axe doit simplement être défini par une étiquette avec quatre lettres qui permettront de l'identifier. Ces étiquettes pourront être utilisées dans le code CSS pour indiquer quel niveau de variation utiliser (cf. exemples ci-après).</p> - </li> -</ul> +- Les axes enregistrés sont ceux que l'on rencontre le plus souvent et qui ont donc été standardisés dans la spécification. À l'heure actuelle, il existe 5 axes enregistrés : le corps, la largeur, la pente, l'italique et la taille optique. Chacun de ces axes possède un attribut CSS correspondant. +- Les axes spécifiques peuvent être n'importe quel axe défini par le concepteur de la police. Chaque axe doit simplement être défini par une étiquette avec quatre lettres qui permettront de l'identifier. Ces étiquettes pourront être utilisées dans le code CSS pour indiquer quel niveau de variation utiliser (cf. exemples ci-après). -<h3 id="Les_axes_enregistrés_et_les_attributs_CSS_existants">Les axes enregistrés et les attributs CSS existants</h3> +### Les axes enregistrés et les attributs CSS existants -<p>Dans cette section, nous verrons en détails les cinq axes enregistrés ainsi que des exemples CSS associés. Dans les cas où c'est possible, nous inclurons la syntaxe standard et la syntaxe de plus bas niveau qui utilise ({{cssxref("font-variation-settings")}}).</p> +Dans cette section, nous verrons en détails les cinq axes enregistrés ainsi que des exemples CSS associés. Dans les cas où c'est possible, nous inclurons la syntaxe standard et la syntaxe de plus bas niveau qui utilise ({{cssxref("font-variation-settings")}}). -<p>Cette propriété fut le premier mécanisme implémenté pour tester les premières implémentations des polices variables et elle reste nécessaire pour utiliser de nouveaux axes ou des axes spécifiques au-delà des cinq axes enregistrés. Toutefois, lorsque c'est possible, cette syntaxe ne doit pas être utilisée si une propriété de plus haut niveau est disponible. Autrement dit, <code>font-variation-settings</code> doit uniquement être utilisée afin de définir des valeurs pour des axes qui ne seraient pas accessibles autrement.</p> +Cette propriété fut le premier mécanisme implémenté pour tester les premières implémentations des polices variables et elle reste nécessaire pour utiliser de nouveaux axes ou des axes spécifiques au-delà des cinq axes enregistrés. Toutefois, lorsque c'est possible, cette syntaxe ne doit pas être utilisée si une propriété de plus haut niveau est disponible. Autrement dit, `font-variation-settings` doit uniquement être utilisée afin de définir des valeurs pour des axes qui ne seraient pas accessibles autrement. -<h4 id="Notes">Notes</h4> +#### Notes -<ol> - <li> - <p>Les noms d'axes utilisés avec <code>font-variation-settings</code> sont sensibles à la casse. Les noms des axes enregistrés doivent être écrits en minuscules et les noms des axes spécifiques doivent être écrits en majuscules. Ainsi, dans ce cas :</p> +1. Les noms d'axes utilisés avec `font-variation-settings` sont sensibles à la casse. Les noms des axes enregistrés doivent être écrits en minuscules et les noms des axes spécifiques doivent être écrits en majuscules. Ainsi, dans ce cas : - <pre class="brush: css">font-variation-settings: 'wght' 375, 'GRAD' 88;</pre> + ```css + font-variation-settings: 'wght' 375, 'GRAD' 88; + ``` - <p><code>wght</code> correspondra à l'axe enregistré du même nom et <code>GRAD</code> à un axe spécifique.</p> - </li> - <li> - <p>Si on a défini des valeurs avec <code>font-variation-settings</code> et qu'on souhaite changer une de ces valeurs, il sera nécessaire de redéclarer l'ensemble des valeurs (de la même façon qu'on doit redéclarer l'ensemble des caractéristiques OpenType avec {{cssxref("font-feature-settings")}}). Il est possible de contourner cet écueil en utilisant <a href="/fr/docs/Web/CSS/Using_CSS_custom_properties">des propriétés CSS personnalisées</a> pour les valeurs individuelles et en modifiant uniquement la valeur d'une des propriétés personnalisée (cf. l'exemple en fin d'article).</p> - </li> -</ol> + `wght` correspondra à l'axe enregistré du même nom et `GRAD` à un axe spécifique. -<h3 id="La_graisse_(weight)">La graisse (<em>weight</em>)</h3> +2. Si on a défini des valeurs avec `font-variation-settings` et qu'on souhaite changer une de ces valeurs, il sera nécessaire de redéclarer l'ensemble des valeurs (de la même façon qu'on doit redéclarer l'ensemble des caractéristiques OpenType avec {{cssxref("font-feature-settings")}}). Il est possible de contourner cet écueil en utilisant [des propriétés CSS personnalisées](/fr/docs/Web/CSS/Using_CSS_custom_properties) pour les valeurs individuelles et en modifiant uniquement la valeur d'une des propriétés personnalisée (cf. l'exemple en fin d'article). -<p>La graisse (représenté par l'étiquette <code>wght</code>) définit l'épaisseur des traits formants les caractères. En CSS, le descripteur {{cssxref("font-weight")}} a depuis longtemps permis d'utiliser différentes graisses avec des valeurs numériques comprises entre 100 et 900 (avec des incréments de 100) ou des mots-clés tels que <code>normal</code> ou <code>bold</code> qui étaient des alias pour une valeur numérique correspondante (400 et 700 ici). Ces valeurs sont toujours utilisables pour les polices statiques mais il est désormais possible d'utiliser n'importe quel entier entre 1 et 1000 dans le cas de polices variables.</p> +### La graisse (_weight_) -<p>On notera qu'il n'est pas possible d'utiliser la déclaration <code>@font-face</code> afin qu'un point donné sur cet axe corresponde au mot-clé <code>bold</code> (ou tout autre mot-clé). Cela pourra généralement être résolu simplement mais nécessitera d'écrire plus de CSS :</p> +La graisse (représenté par l'étiquette `wght`) définit l'épaisseur des traits formants les caractères. En CSS, le descripteur {{cssxref("font-weight")}} a depuis longtemps permis d'utiliser différentes graisses avec des valeurs numériques comprises entre 100 et 900 (avec des incréments de 100) ou des mots-clés tels que `normal` ou `bold` qui étaient des alias pour une valeur numérique correspondante (400 et 700 ici). Ces valeurs sont toujours utilisables pour les polices statiques mais il est désormais possible d'utiliser n'importe quel entier entre 1 et 1000 dans le cas de polices variables. -<pre class="brush: css">font-weight: 375; +On notera qu'il n'est pas possible d'utiliser la déclaration `@font-face` afin qu'un point donné sur cet axe corresponde au mot-clé `bold` (ou tout autre mot-clé). Cela pourra généralement être résolu simplement mais nécessitera d'écrire plus de CSS : -font-variation-settings: 'wght' 375;</pre> +```css +font-weight: 375; -<p>Vous pouvez éditer l'exemple CSS suivant pour voir l'effet sur la graisse de la police.</p> +font-variation-settings: 'wght' 375; +``` -<div>{{EmbedGHLiveSample("css-examples/variable-fonts/weight.html", '100%', 520)}}</div> +Vous pouvez éditer l'exemple CSS suivant pour voir l'effet sur la graisse de la police. -<h3 id="La_largeur_(width)">La largeur (<em>width</em>)</h3> +{{EmbedGHLiveSample("css-examples/variable-fonts/weight.html", '100%', 520)}} -<p>La largeur (indiquée par l'étiquette <code>wdth</code>) correspond à l'axe selon lequel les caractères sont plus ou moins étroits ou larges. En CSS, c'est le descripteur {{cssxref("font-stretch")}} qui peut être utilisé avec un pourcentage inférieur ou supérieur à 100% (la largeur « normale ») ou avec n'importe quel nombre positif. Si une valeur numérique est fournie et se situe en dehors de l'intervalle couvert par la police variable, le navigateur devra choisir la valeur la plus proche possible.</p> +### La largeur (_width_) -<div class="note"> -<p><strong>Note :</strong> Lorsqu'on utilise la notation « bas niveau » avec <code>font-variation-settings</code>, on n'écrit pas le caractère %.</p> -</div> +La largeur (indiquée par l'étiquette `wdth`) correspond à l'axe selon lequel les caractères sont plus ou moins étroits ou larges. En CSS, c'est le descripteur {{cssxref("font-stretch")}} qui peut être utilisé avec un pourcentage inférieur ou supérieur à 100% (la largeur « normale ») ou avec n'importe quel nombre positif. Si une valeur numérique est fournie et se situe en dehors de l'intervalle couvert par la police variable, le navigateur devra choisir la valeur la plus proche possible. -<pre class="brush: css">font-stretch: 115%; +> **Note :** Lorsqu'on utilise la notation « bas niveau » avec `font-variation-settings`, on n'écrit pas le caractère %. + +```css +font-stretch: 115%; font-variation-settings: 'wdth' 115; -</pre> +``` -<p>L'exemple suivant peut être édité pour observer les modifications des valeurs sur cet axe.</p> +L'exemple suivant peut être édité pour observer les modifications des valeurs sur cet axe. -<div>{{EmbedGHLiveSample("css-examples/variable-fonts/width.html", '100%', 520)}}</div> +{{EmbedGHLiveSample("css-examples/variable-fonts/width.html", '100%', 520)}} -<h3 id="L'italique">L'italique</h3> +### L'italique -<p>L'axe italique (<code>ital</code>) fonctionne différemment car il ne s'agit pas d'un intervalle mais d'une option activée ou désactivée : il n'y a pas de valeurs intermédiaires. Les caractères en italique sont la plupart du temps très différents de leur équivalent sans italique et passer d'un mode à l'autre entraîne généralement l'utilisation de glyphes différents. Attention à ne pas confondre l'italique et l'oblique (cf. l'axe de pente ci-après) : une police aura une forme italique ou une variabilité sur l'axe de pente mais rarement les deux.</p> +L'axe italique (`ital`) fonctionne différemment car il ne s'agit pas d'un intervalle mais d'une option activée ou désactivée : il n'y a pas de valeurs intermédiaires. Les caractères en italique sont la plupart du temps très différents de leur équivalent sans italique et passer d'un mode à l'autre entraîne généralement l'utilisation de glyphes différents. Attention à ne pas confondre l'italique et l'oblique (cf. l'axe de pente ci-après) : une police aura une forme italique ou une variabilité sur l'axe de pente mais rarement les deux. -<p>En CSS, l'italique est appliqué grâce à la propriété {{cssxref("font-style")}} (qui permet aussi d'appliquer l'oblique). On notera l'apparition de la propriété <code>font-synthesis: none;</code> qui empêche les navigateurs de synthétiser l'italique en penchant les caractères (on pourra aussi utiliser cette valeur de façon équivalente pour éviter de synthétiser la graisse).</p> +En CSS, l'italique est appliqué grâce à la propriété {{cssxref("font-style")}} (qui permet aussi d'appliquer l'oblique). On notera l'apparition de la propriété `font-synthesis: none;` qui empêche les navigateurs de synthétiser l'italique en penchant les caractères (on pourra aussi utiliser cette valeur de façon équivalente pour éviter de synthétiser la graisse). -<pre class="brush: css">font-style: italic; +```css +font-style: italic; font-variation-settings: 'ital' 1; -font-synthesis: none;</pre> +font-synthesis: none; +``` -<p>L'exemple suivant peut être édité pour observer les modifications des valeurs sur cet axe.</p> +L'exemple suivant peut être édité pour observer les modifications des valeurs sur cet axe. -<div>{{EmbedGHLiveSample("css-examples/variable-fonts/italic.html", '100%', 520)}}</div> +{{EmbedGHLiveSample("css-examples/variable-fonts/italic.html", '100%', 520)}} -<h3 id="La_pente_(slant)">La pente (<em>slant</em>)</h3> +### La pente (_slant_) -<p>La pente (indiquée par l'étiquette <code>slnt</code>), également appelée « oblique », diffère de l'italique car elle applique une pente sur les caractères mais ne change aucun des glyphes. Cet axe est un intervalle numérique allant généralement de 0 (droit) à 20 degrés. Toutefois, les valeurs allant de -90 et à 90 (degrés) sont autorisées. C'est également le descripteur <code>font-style</code> qui peut être utilisé pour cet axe.</p> +La pente (indiquée par l'étiquette `slnt`), également appelée « oblique », diffère de l'italique car elle applique une pente sur les caractères mais ne change aucun des glyphes. Cet axe est un intervalle numérique allant généralement de 0 (droit) à 20 degrés. Toutefois, les valeurs allant de -90 et à 90 (degrés) sont autorisées. C'est également le descripteur `font-style` qui peut être utilisé pour cet axe. -<div class="note"> -<p><strong>Note :</strong> Le mot-clé <code>deg</code> ne doit pas être utilisé comme unité pour la notation avec <code>font-variation-settings</code>.</p> -</div> +> **Note :** Le mot-clé `deg` ne doit pas être utilisé comme unité pour la notation avec `font-variation-settings`. -<pre class="brush: css">font-style: oblique 14deg; +```css +font-style: oblique 14deg; -font-variation-settings: 'slnt' 14;</pre> +font-variation-settings: 'slnt' 14; +``` -<p>L'exemple suivant peut être édité pour observer les modifications des valeurs sur cet axe.</p> +L'exemple suivant peut être édité pour observer les modifications des valeurs sur cet axe. -<div>{{EmbedGHLiveSample("css-examples/variable-fonts/slant.html", '100%', 520)}}</div> +{{EmbedGHLiveSample("css-examples/variable-fonts/slant.html", '100%', 520)}} -<h3 id="La_taille_optique">La taille optique</h3> +### La taille optique -<p>La taille optique, indiquée par l'étiquette <code>opsz</code>, correspond à la variation de l'épaisseur des traits formants le caractère afin de s'assurer que celui-ci puisse être lu avec un petit corps et ainsi de garantir une bonne impression ou un bon affichage à l'écran.</p> +La taille optique, indiquée par l'étiquette `opsz`, correspond à la variation de l'épaisseur des traits formants le caractère afin de s'assurer que celui-ci puisse être lu avec un petit corps et ainsi de garantir une bonne impression ou un bon affichage à l'écran. -<p>Ainsi, pour les petits corps, on pourra avoir des traits plus épais et pour des grands corps, on pourra avoir une variation d'épaisseur plus importante entre les différents traits du caractères pour développer correctement le dessin de la police.</p> +Ainsi, pour les petits corps, on pourra avoir des traits plus épais et pour des grands corps, on pourra avoir une variation d'épaisseur plus importante entre les différents traits du caractères pour développer correctement le dessin de la police. -<p>La plupart du temps, les valeurs liées à la taille optique sont appliquées automatiquement avec les valeurs correspondantes de <code>font-size</code> mais on peut tout à fait les manipuler avec la syntaxe de bas niveau <code>font-variation-settings</code>.</p> +La plupart du temps, les valeurs liées à la taille optique sont appliquées automatiquement avec les valeurs correspondantes de `font-size` mais on peut tout à fait les manipuler avec la syntaxe de bas niveau `font-variation-settings`. -<p>Une nouvelle propriété CSS a été créée afin de prendre en charge cet axe avec une syntaxe haut niveau pour les polices variables : {{cssxref("font-optical-sizing")}}. Le descripteur <code>font-optical-sizing</code> permet uniquement d'utiliser les valeurs <code>auto</code> ou <code>none</code> et ainsi uniquement d'activer ou de désactiver le dimensionnement optique. Toutefois, avec <code>font-variation-settings: 'opsz' <num></code>, on peut fournir une valeur numérique. Dans la plupart des cas, on utilisera la même valeur pour <code>font-size</code> et pour <code>opsz</code>. Il est ici permis d'utiliser une autre valeur spécifique afin d'améliorer la lisibilité ou d'obtenir un effet esthétique.</p> +Une nouvelle propriété CSS a été créée afin de prendre en charge cet axe avec une syntaxe haut niveau pour les polices variables : {{cssxref("font-optical-sizing")}}. Le descripteur `font-optical-sizing` permet uniquement d'utiliser les valeurs `auto` ou `none` et ainsi uniquement d'activer ou de désactiver le dimensionnement optique. Toutefois, avec `font-variation-settings: 'opsz' <num>`, on peut fournir une valeur numérique. Dans la plupart des cas, on utilisera la même valeur pour `font-size` et pour `opsz`. Il est ici permis d'utiliser une autre valeur spécifique afin d'améliorer la lisibilité ou d'obtenir un effet esthétique. -<pre class="brush: css">font-optical-sizing: auto; +```css +font-optical-sizing: auto; -font-variation-settings: 'opsz' 36;</pre> +font-variation-settings: 'opsz' 36; +``` -<p>L'exemple suivant peut être édité pour observer les modifications des valeurs sur cet axe.</p> +L'exemple suivant peut être édité pour observer les modifications des valeurs sur cet axe. -<div>{{EmbedGHLiveSample("css-examples/variable-fonts/optical-sizing.html", '100%', 1020)}}</div> +{{EmbedGHLiveSample("css-examples/variable-fonts/optical-sizing.html", '100%', 1020)}} -<h3 id="Les_axes_spécifiques">Les axes spécifiques</h3> +### Les axes spécifiques -<p>Les axes spécifiques sont introduits spécifiquement par les concepteurs de polices et peuvent correspondre à n'importe quelle variation. Il est possible que certains axes spécifiques deviennent fréquemment utilisés voire finissent par être intégrés aux axes enregistrés mais seul l'avenir le dira avec certitude.</p> +Les axes spécifiques sont introduits spécifiquement par les concepteurs de polices et peuvent correspondre à n'importe quelle variation. Il est possible que certains axes spécifiques deviennent fréquemment utilisés voire finissent par être intégrés aux axes enregistrés mais seul l'avenir le dira avec certitude. -<h3 id="Le_grade">Le grade</h3> +### Le grade -<p>Le grade est une variation qui consiste à épaissir certains des traits des glyphes sans agrandir la largeur totale du glyphe. En augmentant le grade, on a ainsi un caractère plus « dense ». Il ne faut pas confondre le corps et le grade : le premier augmente la taille générale, largeur incluse, des glyphes tandis que le second ne modifie pas l'espace physique occupé par le caractère. Le grade est un axe spécifique plutôt populaire car il permet de faire varier la densité apparente du texte sans modifier sa largeur et ainsi il évite de générer un décalage du texte.</p> +Le grade est une variation qui consiste à épaissir certains des traits des glyphes sans agrandir la largeur totale du glyphe. En augmentant le grade, on a ainsi un caractère plus « dense ». Il ne faut pas confondre le corps et le grade : le premier augmente la taille générale, largeur incluse, des glyphes tandis que le second ne modifie pas l'espace physique occupé par le caractère. Le grade est un axe spécifique plutôt populaire car il permet de faire varier la densité apparente du texte sans modifier sa largeur et ainsi il évite de générer un décalage du texte. -<pre class="brush: css">font-variation-settings: 'GRAD' 88;</pre> +```css +font-variation-settings: 'GRAD' 88; +``` -<p>L'exemple suivant peut être édité pour observer les modifications des valeurs sur cet axe.</p> +L'exemple suivant peut être édité pour observer les modifications des valeurs sur cet axe. -<div>{{EmbedGHLiveSample("css-examples/variable-fonts/grade.html", '100%', 520)}}</div> +{{EmbedGHLiveSample("css-examples/variable-fonts/grade.html", '100%', 520)}} -<h3 id="Utiliser_une_police_variable_les_changements_pour_font-face">Utiliser une police variable : les changements pour <code>@font-face</code></h3> +### Utiliser une police variable : les changements pour `@font-face` -<p>Pour charger une police variable, la syntaxe est proche de celle utilisée pour les polices statiques. Les quelques différences notables sont apportées par des ajouts à la syntaxe {{cssxref("@font-face")}} disponible dans la plupart des navigateurs modernes.</p> +Pour charger une police variable, la syntaxe est proche de celle utilisée pour les polices statiques. Les quelques différences notables sont apportées par des ajouts à la syntaxe {{cssxref("@font-face")}} disponible dans la plupart des navigateurs modernes. -<p>La syntaxe de base est la même mais on peut indiquer la technologie utilisée pour la police ainsi que les intervalles autorisés pour les descripteurs <code>font-weight</code> et <code>font-stretch</code>.</p> +La syntaxe de base est la même mais on peut indiquer la technologie utilisée pour la police ainsi que les intervalles autorisés pour les descripteurs `font-weight` et `font-stretch`. -<h4 id="Exemple_d'une_police_standard_réale_droite">Exemple d'une police standard réale droite :</h4> +#### Exemple d'une police standard réale droite : -<pre class="brush: css">@font-face { +```css +@font-face { font-family: 'MyVariableFontName'; src: 'path/to/font/file/myvariablefont.woff2' format('woff2-variations'); font-weight: 125 950; font-stretch: 75% 125%; font-style: normal; } -</pre> +``` -<h4 id="Exemple_d'une_police_avec_une_forme_droite_et_une_forme_italique">Exemple d'une police avec une forme droite et une forme italique :</h4> +#### Exemple d'une police avec une forme droite et une forme italique : -<pre class="brush: css">@font-face { +```css +@font-face { font-family: 'MyVariableFontName'; src: 'path/to/font/file/myvariablefont.woff2' format('woff2-variations'); font-weight: 125 950; font-stretch: 75% 125%; font-style: oblique 0deg 20deg; -}</pre> +} +``` -<div class="note"> -<p><strong>Note :</strong> Il n'existe pas de valeur spécifique pour la mesure du degré supérieur. Les valeurs fournies à <code>font-style</code> indiquent simplement qu'un axe est présent afin que le navigateur puisse afficher correctement les caractères droits ou en italique.</p> -</div> +> **Note :** Il n'existe pas de valeur spécifique pour la mesure du degré supérieur. Les valeurs fournies à `font-style` indiquent simplement qu'un axe est présent afin que le navigateur puisse afficher correctement les caractères droits ou en italique. -<h4 id="Exemple_d'une_police_qui_ne_contient_que_des_italiques_et_aucun_caractère_droit">Exemple d'une police qui ne contient que des italiques et aucun caractère droit :</h4> +#### Exemple d'une police qui ne contient que des italiques et aucun caractère droit : -<pre class="brush: css">@font-face { +```css +@font-face { font-family: 'MyVariableFontName'; src: 'path/to/font/file/myvariablefont.woff2' format('woff2-variations'); font-weight: 125 950; font-stretch: 75% 125%; font-style: italic; -}</pre> +} +``` -<h4 id="Exemple_d'une_police_avec_un_axe_de_pente">Exemple d'une police avec un axe de pente :</h4> +#### Exemple d'une police avec un axe de pente : -<pre class="brush: css">@font-face { +```css +@font-face { font-family: 'MyVariableFontName'; src: 'path/to/font/file/myvariablefont.woff2' format('woff2-variations'); font-weight: 125 950; font-stretch: 75% 125%; font-style: oblique 0deg 12deg; -}</pre> +} +``` -<div class="note"> -<p><strong>Note :</strong> La syntaxe complète n'est pas implémentée par l'ensemble des navigateurs et il faudra donc tester avec précaution. Tous les navigateurs qui prennent en charge les polices variables sauront les afficher même si seul le format de fichier est indiqué (plutôt que le format complet : par exemple <code>woff2</code> à la place de <code>woff2-variations</code>), mais mieux vaut utiliser la syntaxe la plus précise si possible.</p> -</div> +> **Note :** La syntaxe complète n'est pas implémentée par l'ensemble des navigateurs et il faudra donc tester avec précaution. Tous les navigateurs qui prennent en charge les polices variables sauront les afficher même si seul le format de fichier est indiqué (plutôt que le format complet : par exemple `woff2` à la place de `woff2-variations`), mais mieux vaut utiliser la syntaxe la plus précise si possible. -<div class="note"> -<p><strong>Note :</strong> Fournir des valeurs d'intervalle pour <code>font-weight</code>, <code>font-stretch</code> et <code>font-style</code> empêchera le navigateur d'afficher des polices en dehors de ces intervalles en utilisant les attributs <code>font-weight</code> ou <code>font-stretch</code>. En revanche, cela ne bloquera pas la syntaxe de plus bas niveau avec <code>font-variation-settings</code> !</p> -</div> +> **Note :** Fournir des valeurs d'intervalle pour `font-weight`, `font-stretch` et `font-style` empêchera le navigateur d'afficher des polices en dehors de ces intervalles en utilisant les attributs `font-weight` ou `font-stretch`. En revanche, cela ne bloquera pas la syntaxe de plus bas niveau avec `font-variation-settings` ! -<h2 id="Amélioration_progressive_et_anciens_navigateurs">Amélioration progressive et anciens navigateurs</h2> +## Amélioration progressive et anciens navigateurs -<p>La prise en charge des polices variables peut être vérifié grâce à {{cssxref("@supports")}}. Il est donc possible d'utiliser des polices variables en production et de limiter la portée des polices variables à l'intérieur d'une requête de prise en charge.</p> +La prise en charge des polices variables peut être vérifié grâce à {{cssxref("@supports")}}. Il est donc possible d'utiliser des polices variables en production et de limiter la portée des polices variables à l'intérieur d'une requête de prise en charge. -<pre class="brush: css">h1 { +```css +h1 { font-family: some-non-variable-font-family; } @@ -241,22 +239,21 @@ font-variation-settings: 'opsz' 36;</pre> h1 { font-family: some-variable-font-family; } -}</pre> +} +``` -<h2 id="Pages_d'exemples">Pages d'exemples</h2> +## Pages d'exemples -<p>Les pages d'exemples suivantes illustrent deux façons pour structurer le CSS. La première utilise les attributs standards où c'est possible et la seconde utilise les propriétés personnalisées afin de définir les valeur pour la chaîne de caractères fournie à <code>font-variation-settings</code> et montre comment mettre à jour une valeur plutôt que de redéfinir l'intégralité de la chaîne de caractères. On notera aussi l'effet au survol (<em>hover</em>) sur l'élément <code>h2</code> qui ne joue que sur l'axe de grade.</p> +Les pages d'exemples suivantes illustrent deux façons pour structurer le CSS. La première utilise les attributs standards où c'est possible et la seconde utilise les propriétés personnalisées afin de définir les valeur pour la chaîne de caractères fournie à `font-variation-settings` et montre comment mettre à jour une valeur plutôt que de redéfinir l'intégralité de la chaîne de caractères. On notera aussi l'effet au survol (_hover_) sur l'élément `h2` qui ne joue que sur l'axe de grade. -<div>{{EmbedGHLiveSample("css-examples/variable-fonts/sample-page.html", '100%', 1220)}}</div> +{{EmbedGHLiveSample("css-examples/variable-fonts/sample-page.html", '100%', 1220)}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="https://drafts.csswg.org/css-fonts-4">Module de spécification CSS Fonts de niveau 4 (au stade de brouillon) (en anglais)</a></li> - <li><a href="https://docs.microsoft.com/en-us/typography/opentype/spec/otvaroverview">Introduction Microsoft aux variations Open Type (en anglais)</a></li> - <li><a href="https://docs.microsoft.com/en-us/typography/opentype/spec/dvaraxisreg">Registre des étiquettes d'axe de variation - Microsoft OpenType Design (en anglais)</a></li> - <li><a href="https://wakamaifondue.com">Wakamai Fondue (en anglais)</a> (un site qui permet d'explorer les axes et caractéristiques d'une police)</li> - <li><a href="https://www.axis-praxis.org">Axis Praxis (en anglais)</a> (une site qui permet de manipuler les axes de polices variables)</li> - <li><a href="https://v-fonts.com">V-Fonts.com (en anglais)</a> (un catalogue de polices variables)</li> - <li><a href="https://play.typedetail.com">Font Playground (en anglais)</a> (un autre site de manipulation des polices variables)</li> -</ul> +- [Module de spécification CSS Fonts de niveau 4 (au stade de brouillon) (en anglais)](https://drafts.csswg.org/css-fonts-4) +- [Introduction Microsoft aux variations Open Type (en anglais)](https://docs.microsoft.com/en-us/typography/opentype/spec/otvaroverview) +- [Registre des étiquettes d'axe de variation - Microsoft OpenType Design (en anglais)](https://docs.microsoft.com/en-us/typography/opentype/spec/dvaraxisreg) +- [Wakamai Fondue (en anglais)](https://wakamaifondue.com) (un site qui permet d'explorer les axes et caractéristiques d'une police) +- [Axis Praxis (en anglais)](https://www.axis-praxis.org) (une site qui permet de manipuler les axes de polices variables) +- [V-Fonts.com (en anglais)](https://v-fonts.com) (un catalogue de polices variables) +- [Font Playground (en anglais)](https://play.typedetail.com) (un autre site de manipulation des polices variables) |