font-stretch
============

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 `@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.

|  |  |
| --- | --- |
| En lien avec les règles @ | `@font-face` |
| Valeur initiale | `normal` |
| Valeur calculée | comme spécifié |

Syntaxe
-------


```css
/\* 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 `<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 :

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

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

font-stretch =   
  auto                   |  
  <'font-stretch'>{1,2}    
  
```

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.


```css
@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.

* Comprendre les règles WCAG - Partie 1.4 (MDN)
* Respecter le critère 1.4.8 - Comprendre les règles WCAG 2.0 (W3C)
Spécifications
--------------

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-prop-desc |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* `font-display descriptor`
* `font-family descriptor`
* `font-weight descriptor`
* `font-style descriptor`
* `font-variant descriptor`
* `font-feature-settings`
* `font-variation-settings`
* `src`
* `unicode-range descriptor`