From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../fr/web/css/@font-face/font-stretch/index.html | 183 +++++++++++++++++++++ 1 file changed, 183 insertions(+) create mode 100644 files/fr/web/css/@font-face/font-stretch/index.html (limited to 'files/fr/web/css/@font-face/font-stretch') diff --git a/files/fr/web/css/@font-face/font-stretch/index.html b/files/fr/web/css/@font-face/font-stretch/index.html new file mode 100644 index 0000000000..e7ab910e64 --- /dev/null +++ b/files/fr/web/css/@font-face/font-stretch/index.html @@ -0,0 +1,183 @@ +--- +title: font-stretch +slug: Web/CSS/@font-face/font-stretch +tags: + - '@font-face' + - CSS + - Descripteur + - Reference +translation_of: Web/CSS/@font-face/font-stretch +--- +

{{CSSRef}}{{draft}}

+ +

Le descripteur CSS font-stretch permet aux auteurs de choisir entre la forme normale, condensée ou étendue d'une police fournie dans une règle {{cssxref("@font-face")}}.

+ +

Pour une police donnée, les auteurs peuvent télécharger différentes fontes pour différents styles et utiliser alors font-stretch de façon explicite afin de choisir la fonte voulue. Les valeurs fournies au descripteur CSS sont les mêmes que celles qui peuvent être utilisées pour la propriété correspondante.

+ +

{{cssinfo}}

+ +

Syntaxe

+ +
/* Valeurs simples */
+font-stretch: ultra-condensed;
+font-stretch: extra-condensed;
+font-stretch: condensed;
+font-stretch: semi-condensed;
+font-stretch: normal;
+font-stretch: semi-expanded;
+font-stretch: expanded;
+font-stretch: extra-expanded;
+font-stretch: ultra-expanded;
+font-stretch: 50%;
+font-stretch: 100%;
+font-stretch: 200%;
+
+/* Valeurs multiples */
+font-stretch: 75% 125%;
+font-stretch: condensed ultra-condensed;;
+
+ +

Valeurs

+ +
+
normal
+
Indique la forme normale (en largeur) de la police.
+
semi-condensed, condensed, extra-condensed, ultra-condensed
+
Indique une forme plus condensée que la normale (la valeur ultra-condensed correspond à la forme la plus condensée).
+
semi-expanded, expanded, extra-expanded, ultra-expanded
+
Indique une forme plus étendue que la normale (la valeur ultra-expanded étant la plus étendue).
+
<percentage>
+
Un pourcentage (une valeur de type {{cssxref("<percentage>")}}) dont la valeur est comprise entre 50% et 200% (inclus). Les valeurs négatives ne sont pas autorisées pour cette propriété.
+
+ +

Dans les versions antérieures de la spécification pour font-stretch, la propriété ne s'utilisait qu'avec des mots-clés. Avec le module CSS Fonts de niveau 4, la syntaxe est étendue afin de permettre l'utilisation des valeurs <percentage>. Cela permet aux polices variables de permettre un contrôle plus fin voire continu.

+ +

Pour les polices variables TrueType et OpenType, c'est l'axe de variation "wdth" qui est utilisé afin d'implémenter les largeurs variables.

+ +

Si la police ne dispose pas d'une fonte avec une valeur exactement correspondantes, le moteur choisira la forme la plus proche disponible.

+ +

Correspondance entre les noms et les pourcentages

+ +

Ce tableau indique les correspondances entre les valeurs indiquées par un mot-clé et celles définies avec un pourcentage :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KeywordPourcentage
ultra-condensed50%
extra-condensed62.5%
condensed75%
semi-condensed87.5%
normal100%
semi-expanded112.5%
expanded125%
extra-expanded150%
ultra-expanded200%
+ +

Polices variables

+ +

La plupart des polices disposent de fontes avec des formes "séparées"/"discrètes". Toutefois, les polices variables permettent désormais d'utiliser des variations beaucoup plus fines (et c'est pour cela qu'on utilise les pourcentages).

+ +

Pour les polices variables TrueType ou OpenType, c'est l'axe de variation "wdth" qui est utilisé afin d'implémenter les largeurs variables des glyphes.

+ +

Syntaxe formelle

+ +
{{csssyntax}}
+
+ +

Exemples

+ +

Dans l'exemple suivant, on charge une police Open Sans locale et on l'importe en ciblant les fontes avec les formes normale, semi-condensée et semi-étendue.

+ +
@font-face {
+  font-family: "Open Sans";
+  src: local("Open Sans") format("woff2"),
+       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
+  font-stretch: 87.5% 112.5%;
+}
+ +

Accessibilité

+ +

Les personnes atteintes de dyslexie ou d'autres troubles cognitifs pourront avoir des difficultés à lire des textes dont la fonte est trop condensée, notamment si le contraste des couleurs est trop faible.

+ + + +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Fonts', '#font-prop-desc', 'font-stretch')}}{{Spec2('CSS4 Fonts')}}
{{SpecName('CSS3 Fonts', '#font-prop-desc', 'font-stretch')}}{{Spec2('CSS3 Fonts')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.at-rules.font-face.font-stretch")}}

+ +

Voir aussi

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