From 258ba7b4be62d8640477a3bd3146d08b00cb70ec Mon Sep 17 00:00:00 2001 From: julieng Date: Fri, 17 Sep 2021 20:59:20 +0200 Subject: convert content to md --- files/fr/web/css/font-stretch/index.md | 323 ++++++++++++++++----------------- 1 file changed, 152 insertions(+), 171 deletions(-) (limited to 'files/fr/web/css/font-stretch') diff --git a/files/fr/web/css/font-stretch/index.md b/files/fr/web/css/font-stretch/index.md index 12889ebfbd..e90bc46dfa 100644 --- a/files/fr/web/css/font-stretch/index.md +++ b/files/fr/web/css/font-stretch/index.md @@ -7,11 +7,12 @@ tags: - Reference translation_of: Web/CSS/font-stretch --- -
{{CSSRef}}
+{{CSSRef}} -

La propriété font-stretch permet de choisir entre la forme normale, condensée ou étendue d'une police.

+La propriété **`font-stretch`** permet de choisir entre la forme normale, condensée ou étendue d'une police. -
/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 font-stretch: ultra-condensed;
 font-stretch: extra-condensed;
 font-stretch: condensed;
@@ -31,185 +32,185 @@ font-stretch: 200%;
 font-stretch: inherit;
 font-stretch: initial;
 font-stretch: unset;
-
+``` -

Certaines polices possèdent différentes fontes pour lesquelles les caractères sont plus étroits (fontes condensées) et d'autres pour lesquelles les caractères sont plus amples (fontes étendues).

+Certaines polices possèdent différentes fontes pour lesquelles les caractères sont plus étroits (fontes _condensées_) et d'autres pour lesquelles les caractères sont plus amples (fontes _étendues_). -

font-stretch permet de choisir entre les versions condensées ou étendues d'une police. Si la police utilisée ne possède pas de fonte utilisant cet axe de variation, elle n'aura aucun effet.

+`font-stretch` permet de choisir entre les versions condensées ou étendues d'une police. Si la police utilisée ne possède pas de fonte utilisant cet axe de variation, elle n'aura aucun effet. -

Voir la section ci-après qui illustre l'effet de cette propriété sur certaines polices.

+Voir la section ci-après qui illustre l'effet de cette propriété sur certaines polices. -

Syntaxe

+## Syntaxe -

Cette propriété peut être définie avec un mot-clé ou avec une valeur exprimée en pourcentages (cf. {{cssxref("<percentage>")}}).

+Cette propriété peut être définie avec un mot-clé ou avec une valeur exprimée en pourcentages (cf. {{cssxref("<percentage>")}}). -

Valeurs

+### Valeurs -
-
normal
-
Permet de choisir une fonte normale.
-
semi-condensed, condensed, extra-condensed, ultra-condensed
-
Permet de choisir une fonte plus resserrée que la normale, ultra-condensed correspond à la forme la plus condensée.
-
semi-expanded, expanded, extra-expanded, ultra-expanded
-
Permet de choisir une fonte plus étendue que la normale, ultra-expanded correspond à la forme la plus étirée.
-
<percentage>
-
Une valeur de type {{cssxref("<percentage>")}} entre 50% et 200% qui permet de définir la largeur de la police. Les valeurs négatives ne sont pas autorisées pour cette  propriété.
-
+- `normal` + - : Permet de choisir une fonte normale. +- `semi-condensed`, `condensed`, `extra-condensed`, `ultra-condensed` + - : Permet de choisir une fonte plus resserrée que la normale, `ultra-condensed` correspond à la forme la plus condensée. +- `semi-expanded`, `expanded`, `extra-expanded`, `ultra-expanded` + - : Permet de choisir une fonte plus étendue que la normale, `ultra-expanded` correspond à la forme la plus étirée. +- `` + - : Une valeur de type {{cssxref("<percentage>")}} entre 50% et 200% qui permet de définir la largeur de la police. Les valeurs négatives ne sont pas autorisées pour cette  propriété. -

Dans les anciennes versions de la spécification de font-stretch, seuls les mots-clés étaient acceptés comme valeurs. Avec la spécification CSS Fonts de niveau 4, cette propriété peut également être définie avec un pourcentage. Cela permet d'obtenir un contrôle plus fin sur la largeur. Attention toutefois à la compatibilité car certains navigateurs ne prennent pas encore en charge cette fonctionnalité (cf. la section en fin d'article).

+Dans les anciennes versions de la spécification de `font-stretch`, seuls les mots-clés étaient acceptés comme valeurs. Avec la spécification _CSS Fonts_ de niveau 4, cette propriété peut également être définie avec un pourcentage. Cela permet d'obtenir un contrôle plus fin sur la largeur. Attention toutefois à la compatibilité car certains navigateurs ne prennent pas encore en charge cette fonctionnalité (cf. la section en fin d'article). +### Correspondance entre les mots-clés et les valeurs numériques - -

Correspondance entre les mots-clés et les valeurs numériques

- -

Le tableau suivant indique les correspondances entre les valeurs sous la forme de mots-clés et celles exprimées en pourcentages :

+Le tableau suivant indique les correspondances entre les valeurs sous la forme de mots-clés et celles exprimées en pourcentages : - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Mot-cléPourcentage
ultra-condensed50%
extra-condensed62.5%
condensed75%
semi-condensed87.5%
normal100%
semi-expanded112.5%
expanded125%
extra-expanded150%
ultra-expanded200%
Mot-cléPourcentage
ultra-condensed50%
extra-condensed62.5%
condensed75%
semi-condensed87.5%
normal100%
semi-expanded112.5%
expanded125%
extra-expanded150%
ultra-expanded200%
-

Sélection de la fonte

+### Sélection de la fonte -

La fonte sélectionnée pour une valeur font-stretch dépend des fontes prises en charge par la police. Si la police ne fournit pas de fonte qui corresponde à la valeur exacte, le navigateur utilisera une fonte condensée si la valeur est inférieure à 100% et une fonte étendue si la valeur est supérieure à 100%.

+La fonte sélectionnée pour une valeur `font-stretch` dépend des fontes prises en charge par la police. Si la police ne fournit pas de fonte qui corresponde à la valeur exacte, le navigateur utilisera une fonte condensée si la valeur est inférieure à 100% et une fonte étendue si la valeur est supérieure à 100%. -

Le tableau qui suit illustre l'effet des différents pourcentage avec deux polices possédant différentes fontes :

+Le tableau qui suit illustre l'effet des différents pourcentage avec deux polices possédant différentes fontes : - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
50%62.5%75%87.5%100%112.5%125%150%200%
Helvetica Neue
League Mono Variable
50%62.5%75%87.5%100%112.5%125%150%200%
Helvetica Neue
League Mono Variable
- +- Helvetica Neue est installée par défaut sur macOS et possède une seule fonte condensée en plus de la fonte normale. On voit dans ce tableau que les valeurs de `font-stretch` inférieures à 100% utilisent une fonte condensée alors que les autres valeurs utilisent la fonte normale. +- [League Mono Variable](https://tylerfinck.com/leaguemonovariable/) est une police variable qui offre plusieurs variantes de fontes sur cet axe et on peut alors observer les variations de `font-stretch` selon les pourcentages choisis. -

Pour les polices variables TrueType ou OpenType, c'est l'axe de variation wdth qui implémente ces largeurs variables.

+Pour les polices variables TrueType ou OpenType, c'est l'axe de variation `wdth` qui implémente ces largeurs variables. -

Syntaxe formelle

+### Syntaxe formelle {{csssyntax}} -

Exemples

+## Exemples -

Avec un mot-clé

+### Avec un mot-clé -

HTML

+#### HTML -
<p class="stretch">Le texte est plus étiré.</p>
-<p class="condensed">Le texte est plus resserré.</div>
+```html +

Le texte est plus étiré.

+

Le texte est plus resserré. +``` -

CSS

+#### CSS -
.stretch {
+```css
+.stretch {
   font-stretch: extra-expanded;
 }
 
 .condensed {
   font-stretch: condensed;
-}
+} +``` -

Résultat

+#### Résultat -

{{EmbedLiveSample('Avec_un_mot-clé', '500')}}

+{{EmbedLiveSample('Avec_un_mot-clé', '500')}} -

Avec un pourcentage

+### Avec un pourcentage -

Note : cet exemple ne fonctionnera uniquement avec les navigateurs qui prennent en charge les valeurs <percentage>.

+Note : cet exemple ne fonctionnera uniquement avec les navigateurs qui prennent en charge les valeurs ``. -

HTML

+#### HTML -
<div class="container">
-  <p class="condensed">an elephantine lizard</p>
-  <p class="normal">an elephantine lizard</p>
-  <p class="expanded">an elephantine lizard</p>
-</div>
-
+```html +
+

an elephantine lizard

+

an elephantine lizard

+

an elephantine lizard

+
+``` -

CSS

+#### CSS -
/*
+```css
+/*
 Cet exemple utilise la police League Mono Variable, développée par
 Tyler Finck (https://www.tylerfinck.com/) et utilisée ici selon
 la licence SIL Open Font, Version 1.1 :
@@ -240,43 +241,23 @@ http://scripts.sil.org/cms/scripts/page.php?item_id=OFL_web
 .expanded {
   font-stretch: 200%;
 }
+```
 
-
+#### Résultat -

Résultat

+{{EmbedLiveSample("Avec_un_pourcentage", 1200, 250, "", "", "example-outcome-frame")}} -

{{EmbedLiveSample("Avec_un_pourcentage", 1200, 250, "", "", "example-outcome-frame")}}

+## Spécifications -

Spécifications

+| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------------------ | +| {{SpecName('CSS4 Fonts', '#propdef-font-stretch', 'font-stretch')}} | {{Spec2('CSS4 Fonts')}} | Ajout des valeurs `` pour les polices variables. | +| {{SpecName('CSS3 Fonts', '#propdef-font-stretch', 'font-stretch')}} | {{Spec2('CSS3 Fonts')}} | Définition initiale. | - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS4 Fonts', '#propdef-font-stretch', 'font-stretch')}}{{Spec2('CSS4 Fonts')}}Ajout des valeurs <percentage> pour les polices variables.
{{SpecName('CSS3 Fonts', '#propdef-font-stretch', 'font-stretch')}}{{Spec2('CSS3 Fonts')}}Définition initiale.
- -
-

Note : La propriété CSS font-stretch fut d'abord définie par CSS 2, mais elle a été abandonnée avec CSS 2.1 par manque d'implémentation. Elle fut redéfinie avec CSS 3.

-
+> **Note :** La propriété CSS `font-stretch` fut d'abord définie par CSS 2, mais elle a été abandonnée avec CSS 2.1 par manque d'implémentation. Elle fut redéfinie avec CSS 3. -

{{cssinfo}}

+{{cssinfo}} -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

{{Compat("css.properties.font-stretch")}}

+{{Compat("css.properties.font-stretch")}} -- cgit v1.2.3-54-g00ecf