From 149319bb8c7b1394a443f0877c3460cd362aa815 Mon Sep 17 00:00:00 2001 From: julieng Date: Fri, 17 Sep 2021 20:58:15 +0200 Subject: move *.html to *.md --- files/fr/web/css/css_fonts/index.html | 126 ---------- files/fr/web/css/css_fonts/index.md | 126 ++++++++++ .../css/css_fonts/opentype_fonts_guide/index.html | 230 ------------------ .../css/css_fonts/opentype_fonts_guide/index.md | 230 ++++++++++++++++++ .../css/css_fonts/variable_fonts_guide/index.html | 262 --------------------- .../css/css_fonts/variable_fonts_guide/index.md | 262 +++++++++++++++++++++ 6 files changed, 618 insertions(+), 618 deletions(-) delete mode 100644 files/fr/web/css/css_fonts/index.html create mode 100644 files/fr/web/css/css_fonts/index.md delete mode 100644 files/fr/web/css/css_fonts/opentype_fonts_guide/index.html create mode 100644 files/fr/web/css/css_fonts/opentype_fonts_guide/index.md delete mode 100644 files/fr/web/css/css_fonts/variable_fonts_guide/index.html create mode 100644 files/fr/web/css/css_fonts/variable_fonts_guide/index.md (limited to 'files/fr/web/css/css_fonts') diff --git a/files/fr/web/css/css_fonts/index.html b/files/fr/web/css/css_fonts/index.html deleted file mode 100644 index 76d002b94e..0000000000 --- a/files/fr/web/css/css_fonts/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: CSS Fonts -slug: Web/CSS/CSS_Fonts -tags: - - Aperçu - - CSS - - CSS Fonts - - Reference -translation_of: Web/CSS/CSS_Fonts ---- -
{{CSSRef}}
- -

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.

- -

Exemple simple

- -

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.

- -

CSS

- -
p {
-  width: 600px;
-  margin: 0 auto;
-  font-family: "Helvetica Neue", "Arial",  sans-serif;
-  font-style: italic;
-  font-weight: 100;
-  font-variant-ligatures: normal;
-  font-size: 2rem;
-  letter-spacing: 1px;
-}
- -

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>
- -

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 et axis-praxis.org. Notre guide sur les polices variables contient des informations et des exemples d'utilisation.

- -

Référence

- -

Propriétés

- - - -

Règles @

- - - -

Guides

- -
-
Mise en forme du texte et utilisation des polices
-
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
-
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
-
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ÉtatCommentaires
{{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/index.md b/files/fr/web/css/css_fonts/index.md new file mode 100644 index 0000000000..76d002b94e --- /dev/null +++ b/files/fr/web/css/css_fonts/index.md @@ -0,0 +1,126 @@ +--- +title: CSS Fonts +slug: Web/CSS/CSS_Fonts +tags: + - Aperçu + - CSS + - CSS Fonts + - Reference +translation_of: Web/CSS/CSS_Fonts +--- +
{{CSSRef}}
+ +

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.

+ +

Exemple simple

+ +

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.

+ +

CSS

+ +
p {
+  width: 600px;
+  margin: 0 auto;
+  font-family: "Helvetica Neue", "Arial",  sans-serif;
+  font-style: italic;
+  font-weight: 100;
+  font-variant-ligatures: normal;
+  font-size: 2rem;
+  letter-spacing: 1px;
+}
+ +

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>
+ +

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 et axis-praxis.org. Notre guide sur les polices variables contient des informations et des exemples d'utilisation.

+ +

Référence

+ +

Propriétés

+ + + +

Règles @

+ + + +

Guides

+ +
+
Mise en forme du texte et utilisation des polices
+
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
+
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
+
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ÉtatCommentaires
{{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.html b/files/fr/web/css/css_fonts/opentype_fonts_guide/index.html deleted file mode 100644 index ed04d4ca73..0000000000 --- a/files/fr/web/css/css_fonts/opentype_fonts_guide/index.html +++ /dev/null @@ -1,230 +0,0 @@ ---- -title: Guide des caractéristiques de police OpenType -slug: Web/CSS/CSS_Fonts/OpenType_fonts_guide -tags: - - CSS - - Fonts - - Guide - - Polices -translation_of: Web/CSS/CSS_Fonts/OpenType_fonts_guide -original_slug: Web/CSS/CSS_Fonts/Guide_caractéristiques_police_OpenType ---- -
{{CSSRef}}
- -

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.

- -

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.

- -

En plus des caractéristiques communément utilisées telles que les ligatures ou les chiffres elzéviriens, 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.

- -
-

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.

-
- -

Découvrir la disponibilité des caractéristiques pour certaines polices

- -

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, y uploader le fichier de la police et recevoir un rapport complet peu de temps après ; le site 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é.

- -

Pourquoi utiliser les caractéristiques d'une police ?

- -

É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 :

- - - -

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é

- -
-

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.

-
- -

Au-delà du style : le contenu même

- -

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.

- -

Les caractéristiques

- -

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.

- -
-

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).

-
- -

Le crénage (kerning) ({{cssxref("font-kerning")}})

- -

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.

- -
{{EmbedGHLiveSample("css-examples/font-features/font-kerning.html", '100%', 520)}}
- -

Les formes alternatives ({{cssxref("font-variant-alternates")}})

- -

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.

- -
{{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.
- -

Vous pouvez modifier :

- -
font-variant-alternates: styleset(alt-a);
- -

en :

- -
font-variant-alternates: styleset(alt-g);
-
- -

et voir comment la lettre a retrouve sa forme normale et comment la lettre g est modifiée.

- -

En savoir plus sur les formes alternatives

- - - -

Les ligatures ({{cssxref("font-variant-ligatures")}})

- -

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 »).

- -

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 :

- -
{{EmbedGHLiveSample("css-examples/font-features/font-variant-ligatures.html", '100%', 540)}}
- -

Les positions ({{cssxref("font-variant-position")}})

- -

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")}}).

- -
{{EmbedGHLiveSample("css-examples/font-features/font-variant-position.html", '100%', 550)}}
- -

Les capitales ({{cssxref("font-variant-caps")}})

- -

Une utilisation fréquente des caractéristiques OpenType est l'activation de « vraies » petites capitales qui sont généralement utilisées pour les acronymes et les abréviations.

- -
{{EmbedGHLiveSample("css-examples/font-features/font-variant-caps.html", '100%', 620)}}
- -

Les chiffres ({{cssxref("font-variant-numeric")}})

- -

Il existe généralement différents types de chiffre dans les polices :

- - - -

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).

- -

Deux types de fractions peuvent être prises en charge avec cette propriété :

- - - -

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.

- -

Chiffres classiques et chiffres elzéviriens

- -
{{EmbedGHLiveSample("css-examples/font-features/font-variant-numeric.html", '100%', 560)}}
- -

Fractions, nombres ordinaux et zéro barré

- -
{{EmbedGHLiveSample("css-examples/font-features/font-variant-numeric-frac.html", '100%', 600)}}
- -

Caractères d'Asie orientale ({{cssxref("font-variant-east-asian")}})

- -

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.

- -
{{EmbedGHLiveSample("css-examples/font-features/font-variant-east-asian.html", '100%', 750)}}
- -
-

Note : Ces glyphes ont été copiés à partir d'un exemple et le texte qu'ils constituent n'ont aucun sens particulier.

-
- -

Propriété raccourcie ({{Cssxref("font-variant")}})

- -

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).

- -
{{EmbedGHLiveSample("css-examples/font-features/font-variant.html", '100%', 600)}}
- -

Utiliser font-feature-settings

- -

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 afin de définir les valeurs). Aussi, mieux vaut utiliser les propriétés standards lorsque c'est possible.

- -

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.

- -

La syntaxe générale suivra cette structure :

- -
.small-caps {
-  font-feature-settings: "smcp", "c2sc";
-}
-
- -

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 :

- -
.no-ligatures {
-  font-feature-settings: "liga" 0, "dlig" 0;
-}
- -

En savoir plus sur les codes des caractéristiques font-feature-settings

- - - -

Utiliser la détection de fonctionnalités CSS

- -

É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.

- -

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")}}.

- -
.small-caps {
-   font-feature-settings: "smcp", "c2sc";
-}
-
-@supports (font-variant-caps: all-small-caps) {
-   .small-caps {
-       font-feature-settings: normal;
-       font-variant-caps: all-small-caps;
-   }
-}
-
- -

Voir aussi

- -

Démonstrations de caractéristiques OpenType en CSS

- - - -

Outils web d'analyse de polices

- - - -

Spécifications W3C

- - - -

Autres ressources

- - 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 new file mode 100644 index 0000000000..ed04d4ca73 --- /dev/null +++ b/files/fr/web/css/css_fonts/opentype_fonts_guide/index.md @@ -0,0 +1,230 @@ +--- +title: Guide des caractéristiques de police OpenType +slug: Web/CSS/CSS_Fonts/OpenType_fonts_guide +tags: + - CSS + - Fonts + - Guide + - Polices +translation_of: Web/CSS/CSS_Fonts/OpenType_fonts_guide +original_slug: Web/CSS/CSS_Fonts/Guide_caractéristiques_police_OpenType +--- +
{{CSSRef}}
+ +

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.

+ +

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.

+ +

En plus des caractéristiques communément utilisées telles que les ligatures ou les chiffres elzéviriens, 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.

+ +
+

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.

+
+ +

Découvrir la disponibilité des caractéristiques pour certaines polices

+ +

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, y uploader le fichier de la police et recevoir un rapport complet peu de temps après ; le site 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é.

+ +

Pourquoi utiliser les caractéristiques d'une police ?

+ +

É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 :

+ + + +

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é

+ +
+

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.

+
+ +

Au-delà du style : le contenu même

+ +

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.

+ +

Les caractéristiques

+ +

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.

+ +
+

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).

+
+ +

Le crénage (kerning) ({{cssxref("font-kerning")}})

+ +

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.

+ +
{{EmbedGHLiveSample("css-examples/font-features/font-kerning.html", '100%', 520)}}
+ +

Les formes alternatives ({{cssxref("font-variant-alternates")}})

+ +

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.

+ +
{{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.
+ +

Vous pouvez modifier :

+ +
font-variant-alternates: styleset(alt-a);
+ +

en :

+ +
font-variant-alternates: styleset(alt-g);
+
+ +

et voir comment la lettre a retrouve sa forme normale et comment la lettre g est modifiée.

+ +

En savoir plus sur les formes alternatives

+ + + +

Les ligatures ({{cssxref("font-variant-ligatures")}})

+ +

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 »).

+ +

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 :

+ +
{{EmbedGHLiveSample("css-examples/font-features/font-variant-ligatures.html", '100%', 540)}}
+ +

Les positions ({{cssxref("font-variant-position")}})

+ +

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")}}).

+ +
{{EmbedGHLiveSample("css-examples/font-features/font-variant-position.html", '100%', 550)}}
+ +

Les capitales ({{cssxref("font-variant-caps")}})

+ +

Une utilisation fréquente des caractéristiques OpenType est l'activation de « vraies » petites capitales qui sont généralement utilisées pour les acronymes et les abréviations.

+ +
{{EmbedGHLiveSample("css-examples/font-features/font-variant-caps.html", '100%', 620)}}
+ +

Les chiffres ({{cssxref("font-variant-numeric")}})

+ +

Il existe généralement différents types de chiffre dans les polices :

+ + + +

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).

+ +

Deux types de fractions peuvent être prises en charge avec cette propriété :

+ + + +

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.

+ +

Chiffres classiques et chiffres elzéviriens

+ +
{{EmbedGHLiveSample("css-examples/font-features/font-variant-numeric.html", '100%', 560)}}
+ +

Fractions, nombres ordinaux et zéro barré

+ +
{{EmbedGHLiveSample("css-examples/font-features/font-variant-numeric-frac.html", '100%', 600)}}
+ +

Caractères d'Asie orientale ({{cssxref("font-variant-east-asian")}})

+ +

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.

+ +
{{EmbedGHLiveSample("css-examples/font-features/font-variant-east-asian.html", '100%', 750)}}
+ +
+

Note : Ces glyphes ont été copiés à partir d'un exemple et le texte qu'ils constituent n'ont aucun sens particulier.

+
+ +

Propriété raccourcie ({{Cssxref("font-variant")}})

+ +

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).

+ +
{{EmbedGHLiveSample("css-examples/font-features/font-variant.html", '100%', 600)}}
+ +

Utiliser font-feature-settings

+ +

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 afin de définir les valeurs). Aussi, mieux vaut utiliser les propriétés standards lorsque c'est possible.

+ +

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.

+ +

La syntaxe générale suivra cette structure :

+ +
.small-caps {
+  font-feature-settings: "smcp", "c2sc";
+}
+
+ +

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 :

+ +
.no-ligatures {
+  font-feature-settings: "liga" 0, "dlig" 0;
+}
+ +

En savoir plus sur les codes des caractéristiques font-feature-settings

+ + + +

Utiliser la détection de fonctionnalités CSS

+ +

É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.

+ +

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")}}.

+ +
.small-caps {
+   font-feature-settings: "smcp", "c2sc";
+}
+
+@supports (font-variant-caps: all-small-caps) {
+   .small-caps {
+       font-feature-settings: normal;
+       font-variant-caps: all-small-caps;
+   }
+}
+
+ +

Voir aussi

+ +

Démonstrations de caractéristiques OpenType en CSS

+ + + +

Outils web d'analyse de polices

+ + + +

Spécifications W3C

+ + + +

Autres ressources

+ + diff --git a/files/fr/web/css/css_fonts/variable_fonts_guide/index.html b/files/fr/web/css/css_fonts/variable_fonts_guide/index.html deleted file mode 100644 index 487a4b1948..0000000000 --- a/files/fr/web/css/css_fonts/variable_fonts_guide/index.html +++ /dev/null @@ -1,262 +0,0 @@ ---- -title: Guide des polices variables -slug: Web/CSS/CSS_Fonts/Variable_Fonts_Guide -tags: - - CSS - - Fonts - - Guide - - Polices -translation_of: Web/CSS/CSS_Fonts/Variable_Fonts_Guide -original_slug: Web/CSS/CSS_Fonts/Guide_polices_variables ---- -
{{CSSRef}}
- -

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.

- -
-

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.

-
- -

Qu'est-ce qu'une police variable ?

- -

Pour mieux comprendre le fonctionnement des polices variables, revenons sur les polices « statiques » et comparons les deux systèmes.

- -

Les polices standard ou polices statiques

- -

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.

- -

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).

- -

Les polices variables

- -

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.

- -

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.

- -

Quelques notes à propos des familles de polices, des corps et des variantes

- -

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.

- -

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")}}.

- -

L'axe de variation

- -

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).

- -

Comme indiqué dans la spécification, deux types d'axe existent : les axes enregistrés et les axes spécifiques (custom axes) :

- - - -

Les axes enregistrés et les attributs CSS existants

- -

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")}}).

- -

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.

- -

Notes

- -
    -
  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 :

    - - 
    font-variation-settings: 'wght' 375, 'GRAD' 88;
    - -

    wght correspondra à l'axe enregistré du même nom et GRAD à un axe spécifique.

    -
    2. -
  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 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).

    -
    3. -
- -

La graisse (weight)

- -

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.

- -

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-weight: 375;
-
-font-variation-settings: 'wght' 375;
- -

Vous pouvez éditer l'exemple CSS suivant pour voir l'effet sur la graisse de la police.

- -
{{EmbedGHLiveSample("css-examples/variable-fonts/weight.html", '100%', 520)}}
- -

La largeur (width)

- -

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.

- -
-

Note : Lorsqu'on utilise la notation « bas niveau » avec font-variation-settings, on n'écrit pas le caractère %.

-
- -
font-stretch: 115%;
-
-font-variation-settings: 'wdth' 115;
-
- -

L'exemple suivant peut être édité pour observer les modifications des valeurs sur cet axe.

- -
{{EmbedGHLiveSample("css-examples/variable-fonts/width.html", '100%', 520)}}
- -

L'italique

- -

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.

- -

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).

- -
font-style: italic;
-
-font-variation-settings: 'ital' 1;
-
-font-synthesis: none;
- -

L'exemple suivant peut être édité pour observer les modifications des valeurs sur cet axe.

- -
{{EmbedGHLiveSample("css-examples/variable-fonts/italic.html", '100%', 520)}}
- -

La pente (slant)

- -

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.

- -
-

Note : Le mot-clé deg ne doit pas être utilisé comme unité pour la notation avec font-variation-settings.

-
- -
font-style: oblique 14deg;
-
-font-variation-settings: 'slnt' 14;
- -

L'exemple suivant peut être édité pour observer les modifications des valeurs sur cet axe.

- -
{{EmbedGHLiveSample("css-examples/variable-fonts/slant.html", '100%', 520)}}
- -

La taille optique

- -

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.

- -

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.

- -

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.

- -

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.

- -
font-optical-sizing: auto;
-
-font-variation-settings: 'opsz' 36;
- -

L'exemple suivant peut être édité pour observer les modifications des valeurs sur cet axe.

- -
{{EmbedGHLiveSample("css-examples/variable-fonts/optical-sizing.html", '100%', 1020)}}
- -

Les axes spécifiques

- -

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.

- -

Le grade

- -

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.

- -
font-variation-settings: 'GRAD' 88;
- -

L'exemple suivant peut être édité pour observer les modifications des valeurs sur cet axe.

- -
{{EmbedGHLiveSample("css-examples/variable-fonts/grade.html", '100%', 520)}}
- -

Utiliser une police variable : les changements pour @font-face

- -

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.

- -

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.

- -

Exemple d'une police standard réale droite :

- -
@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;
-}
-
- -

Exemple d'une police avec une forme droite et une forme italique :

- -
@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;
-}
- -
-

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.

-
- -

Exemple d'une police qui ne contient que des italiques et aucun caractère droit :

- -
@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;
-}
- -

Exemple d'une police avec un axe de pente :

- -
@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;
-}
- -
-

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.

-
- -
-

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 !

-
- -

Amélioration progressive et anciens navigateurs

- -

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.

- -
h1 {
- font-family: some-non-variable-font-family;
-}
-
-@supports (font-variation-settings: 'wdth' 115) {
- h1 {
-    font-family: some-variable-font-family;
- }
-}
- -

Pages d'exemples

- -

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.

- -
{{EmbedGHLiveSample("css-examples/variable-fonts/sample-page.html", '100%', 1220)}}
- -

Voir aussi

- - 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 new file mode 100644 index 0000000000..487a4b1948 --- /dev/null +++ b/files/fr/web/css/css_fonts/variable_fonts_guide/index.md @@ -0,0 +1,262 @@ +--- +title: Guide des polices variables +slug: Web/CSS/CSS_Fonts/Variable_Fonts_Guide +tags: + - CSS + - Fonts + - Guide + - Polices +translation_of: Web/CSS/CSS_Fonts/Variable_Fonts_Guide +original_slug: Web/CSS/CSS_Fonts/Guide_polices_variables +--- +
{{CSSRef}}
+ +

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.

+ +
+

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.

+
+ +

Qu'est-ce qu'une police variable ?

+ +

Pour mieux comprendre le fonctionnement des polices variables, revenons sur les polices « statiques » et comparons les deux systèmes.

+ +

Les polices standard ou polices statiques

+ +

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.

+ +

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).

+ +

Les polices variables

+ +

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.

+ +

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.

+ +

Quelques notes à propos des familles de polices, des corps et des variantes

+ +

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.

+ +

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")}}.

+ +

L'axe de variation

+ +

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).

+ +

Comme indiqué dans la spécification, deux types d'axe existent : les axes enregistrés et les axes spécifiques (custom axes) :

+ + + +

Les axes enregistrés et les attributs CSS existants

+ +

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")}}).

+ +

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.

+ +

Notes

+ +
    +
  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 :

    + + 
    font-variation-settings: 'wght' 375, 'GRAD' 88;
    + +

    wght correspondra à l'axe enregistré du même nom et GRAD à un axe spécifique.

    +
    2. +
  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 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).

    +
    3. +
+ +

La graisse (weight)

+ +

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.

+ +

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-weight: 375;
+
+font-variation-settings: 'wght' 375;
+ +

Vous pouvez éditer l'exemple CSS suivant pour voir l'effet sur la graisse de la police.

+ +
{{EmbedGHLiveSample("css-examples/variable-fonts/weight.html", '100%', 520)}}
+ +

La largeur (width)

+ +

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.

+ +
+

Note : Lorsqu'on utilise la notation « bas niveau » avec font-variation-settings, on n'écrit pas le caractère %.

+
+ +
font-stretch: 115%;
+
+font-variation-settings: 'wdth' 115;
+
+ +

L'exemple suivant peut être édité pour observer les modifications des valeurs sur cet axe.

+ +
{{EmbedGHLiveSample("css-examples/variable-fonts/width.html", '100%', 520)}}
+ +

L'italique

+ +

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.

+ +

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).

+ +
font-style: italic;
+
+font-variation-settings: 'ital' 1;
+
+font-synthesis: none;
+ +

L'exemple suivant peut être édité pour observer les modifications des valeurs sur cet axe.

+ +
{{EmbedGHLiveSample("css-examples/variable-fonts/italic.html", '100%', 520)}}
+ +

La pente (slant)

+ +

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.

+ +
+

Note : Le mot-clé deg ne doit pas être utilisé comme unité pour la notation avec font-variation-settings.

+
+ +
font-style: oblique 14deg;
+
+font-variation-settings: 'slnt' 14;
+ +

L'exemple suivant peut être édité pour observer les modifications des valeurs sur cet axe.

+ +
{{EmbedGHLiveSample("css-examples/variable-fonts/slant.html", '100%', 520)}}
+ +

La taille optique

+ +

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.

+ +

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.

+ +

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.

+ +

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.

+ +
font-optical-sizing: auto;
+
+font-variation-settings: 'opsz' 36;
+ +

L'exemple suivant peut être édité pour observer les modifications des valeurs sur cet axe.

+ +
{{EmbedGHLiveSample("css-examples/variable-fonts/optical-sizing.html", '100%', 1020)}}
+ +

Les axes spécifiques

+ +

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.

+ +

Le grade

+ +

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.

+ +
font-variation-settings: 'GRAD' 88;
+ +

L'exemple suivant peut être édité pour observer les modifications des valeurs sur cet axe.

+ +
{{EmbedGHLiveSample("css-examples/variable-fonts/grade.html", '100%', 520)}}
+ +

Utiliser une police variable : les changements pour @font-face

+ +

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.

+ +

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.

+ +

Exemple d'une police standard réale droite :

+ +
@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;
+}
+
+ +

Exemple d'une police avec une forme droite et une forme italique :

+ +
@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;
+}
+ +
+

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.

+
+ +

Exemple d'une police qui ne contient que des italiques et aucun caractère droit :

+ +
@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;
+}
+ +

Exemple d'une police avec un axe de pente :

+ +
@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;
+}
+ +
+

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.

+
+ +
+

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 !

+
+ +

Amélioration progressive et anciens navigateurs

+ +

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.

+ +
h1 {
+ font-family: some-non-variable-font-family;
+}
+
+@supports (font-variation-settings: 'wdth' 115) {
+ h1 {
+    font-family: some-variable-font-family;
+ }
+}
+ +

Pages d'exemples

+ +

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.

+ +
{{EmbedGHLiveSample("css-examples/variable-fonts/sample-page.html", '100%', 1220)}}
+ +

Voir aussi

+ + -- cgit v1.2.3-54-g00ecf