aboutsummaryrefslogtreecommitdiff
path: root/files/fr/web/css/font-stretch
diff options
context:
space:
mode:
authorSphinxKnight <SphinxKnight@users.noreply.github.com>2022-03-15 07:00:50 +0100
committerGitHub <noreply@github.com>2022-03-15 07:00:50 +0100
commitdf8056fc0652ecafffac996081b73435acfab849 (patch)
treeba22b4208fcbe6ca7765a1970d9b377d64b2af08 /files/fr/web/css/font-stretch
parent464e20b22c72324bdaebc232aebefbaca9184a19 (diff)
downloadtranslated-content-df8056fc0652ecafffac996081b73435acfab849.tar.gz
translated-content-df8056fc0652ecafffac996081b73435acfab849.tar.bz2
translated-content-df8056fc0652ecafffac996081b73435acfab849.zip
Remove mozillademo links from CSS (#3642)
* Work - part 1 / N * background-attachment * background-blend-mode * background-image * background-origin * Background position * background-repeat * background-size * border-image * border-image-outset * border-image-repeat * border-image-slice * border-image-width * clip-path * content * cross-fade() * border-radius-generator * multiple bckgrnd * vertical-align * url * text-combine-upright * position_value * image-rendering * using css gradients * font-stretch * font-stretch - add bcd key * font-variant-numeric * font-weight * image-orientation * list-style-image * mask-border * mask-clip * mask-composite * mask-image * mask-mode * mask-origin * mask-position * mask-size * object-fit * object-position * position * Various fixes and improvements * Remove unecessary files * Remove unecessary files (part 2) * Missed level 1 fixes Co-authored-by: cw118 <carolyn94118@gmail.com>
Diffstat (limited to 'files/fr/web/css/font-stretch')
-rw-r--r--files/fr/web/css/font-stretch/index.md187
1 files changed, 38 insertions, 149 deletions
diff --git a/files/fr/web/css/font-stretch/index.md b/files/fr/web/css/font-stretch/index.md
index e90bc46dfa..39232c5d9d 100644
--- a/files/fr/web/css/font-stretch/index.md
+++ b/files/fr/web/css/font-stretch/index.md
@@ -1,15 +1,16 @@
---
title: font-stretch
slug: Web/CSS/font-stretch
-tags:
- - CSS
- - Propriété
- - Reference
translation_of: Web/CSS/font-stretch
+browser-compat: css.properties.font-stretch
---
{{CSSRef}}
-La propriété **`font-stretch`** permet de choisir entre la forme normale, condensée ou étendue d'une police.
+La propriété [CSS](/fr/docs/Web/CSS) **`font-stretch`** permet de choisir entre la forme normale, condensée ou étendue d'une police.
+
+{{EmbedInteractiveExample("pages/css/font-stretch.html")}}
+
+## Syntaxe
```css
/* Valeurs avec un mot-clé */
@@ -31,18 +32,11 @@ font-stretch: 200%;
/* Valeurs globales */
font-stretch: inherit;
font-stretch: initial;
+font-stretch: revert;
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_).
-
-`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.
-
-## Syntaxe
-
-Cette propriété peut être définie avec un mot-clé ou avec une valeur exprimée en pourcentages (cf. {{cssxref("&lt;percentage&gt;")}}).
+Cette propriété peut être définie avec un mot-clé ou avec une valeur exprimée en pourcentages (cf. [`<percentage>`](/fr/docs/Web/CSS/percentage)).
### Valeurs
@@ -53,66 +47,37 @@ Cette propriété peut être définie avec un mot-clé ou avec une valeur exprim
- `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("&lt;percentage&gt;")}} 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é.
+ - : Une valeur de type [`<percentage>`](/fr/docs/Web/CSS/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](https://drafts.csswg.org/css-fonts-4/#propdef-font-stretch), cette propriété peut également être définie avec un pourcentage. Cela permet d'obtenir un contrôle plus fin sur la largeur. Pour les polices variables TrueType ou OpenType, c'est l'axe de variation `wdth` qui implémente ces largeurs variables. Attention toutefois à la compatibilité, car certains navigateurs ne prennent pas encore en charge cette fonctionnalité (cf. [la section en fin d'article sur la compatibilité des navigateurs](#compatibilité_des_navigateurs)).
### 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&nbsp;:
-<table class="fullwidth-table standard-table">
- <thead>
- <tr>
- <th scope="col">Mot-clé</th>
- <th scope="col">Pourcentage</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td><code>ultra-condensed</code></td>
- <td>50%</td>
- </tr>
- <tr>
- <td><code>extra-condensed</code></td>
- <td>62.5%</td>
- </tr>
- <tr>
- <td><code>condensed</code></td>
- <td>75%</td>
- </tr>
- <tr>
- <td><code>semi-condensed</code></td>
- <td>87.5%</td>
- </tr>
- <tr>
- <td><code>normal</code></td>
- <td>100%</td>
- </tr>
- <tr>
- <td><code>semi-expanded</code></td>
- <td>112.5%</td>
- </tr>
- <tr>
- <td><code>expanded</code></td>
- <td>125%</td>
- </tr>
- <tr>
- <td><code>extra-expanded</code></td>
- <td>150%</td>
- </tr>
- <tr>
- <td><code>ultra-expanded</code></td>
- <td>200%</td>
- </tr>
- </tbody>
-</table>
+| Mot-clé | Pourcentage |
+| ----------------- | ----------- |
+| `ultra-condensed` | 50% |
+| `extra-condensed` | 62.5% |
+| `condensed` | 75% |
+| `semi-condensed` | 87.5% |
+| `normal` | 100% |
+| `semi-expanded` | 112.5% |
+| `expanded` | 125% |
+| `extra-expanded` | 150% |
+| `ultra-expanded` | 200% |
+
+## Description
+
+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.
### 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%.
-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 pourcentages avec deux polices possédant différentes fontes&nbsp;:
<table class="standard-table">
<thead>
@@ -160,104 +125,28 @@ Le tableau qui suit illustre l'effet des différents pourcentage avec deux polic
- 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.
-
### Syntaxe formelle
{{csssyntax}}
## Exemples
-### Avec un mot-clé
-
-#### HTML
-
-```html
-<p class="stretch">Le texte est plus étiré.</p>
-<p class="condensed">Le texte est plus resserré.</div>
-```
-
-#### CSS
-
-```css
-.stretch {
- font-stretch: extra-expanded;
-}
-
-.condensed {
- font-stretch: condensed;
-}
-```
-
-#### Résultat
-
-{{EmbedLiveSample('Avec_un_mot-clé', '500')}}
-
### Avec un pourcentage
-Note : cet exemple ne fonctionnera uniquement avec les navigateurs qui prennent en charge les valeurs `<percentage>`.
-
-#### 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>
-```
-
-#### 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 :
-http://scripts.sil.org/cms/scripts/page.php?item_id=OFL_web
-*/
-
-@font-face {
- src: url('https://mdn.mozillademos.org/files/16014/LeagueMonoVariable.ttf');
- font-family:'LeagueMonoVariable';
- font-style: normal;
- font-stretch: 1% 500%; /* Nécessaire pour Chrome */
-}
-
-.container {
- border: 10px solid #f5f9fa;
- padding: 0 1rem;
- font: 1.5rem 'LeagueMonoVariable', sans-serif;
-}
-
-.condensed {
- font-stretch: 50%;
-}
-
-.normal {
- font-stretch: 100%;
-}
-
-.expanded {
- font-stretch: 200%;
-}
-```
-
-#### Résultat
-
-{{EmbedLiveSample("Avec_un_pourcentage", 1200, 250, "", "", "example-outcome-frame")}}
+{{EmbedGHLiveSample("css-examples/variable-fonts/font-stretch.html", '100%', 950)}}
## Spécifications
-| Spécification | État | Commentaires |
-| ---------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------------------ |
-| {{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. |
+{{Specifications}}
> **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}}
-
## Compatibilité des navigateurs
-{{Compat("css.properties.font-stretch")}}
+{{Compat}}
+
+## Voir aussi
+
+- [`font-style`](/fr/docs/Web/CSS/font-style)
+- [`font-weight`](/fr/docs/Web/CSS/font-weight)
+- [Apprendre — Notions fondamentales sur le texte et la mise en forme avec les polices](/fr/docs/Learn/CSS/Styling_text/Fundamentals)