diff options
author | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2022-03-15 07:00:50 +0100 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-03-15 07:00:50 +0100 |
commit | df8056fc0652ecafffac996081b73435acfab849 (patch) | |
tree | ba22b4208fcbe6ca7765a1970d9b377d64b2af08 /files/fr/web/css/font-stretch | |
parent | 464e20b22c72324bdaebc232aebefbaca9184a19 (diff) | |
download | translated-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.md | 187 |
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("<percentage>")}}). +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("<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é. + - : 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 : -<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 : <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) |