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

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

Exemple interactif
------------------

Syntaxe
-------


```css
/\* Valeurs avec un mot-clé \*/
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;

/\* Valeurs en pourcentage \*/
font-stretch: 50%;
font-stretch: 100%;
font-stretch: 200%;

/\* Valeurs globales \*/
font-stretch: inherit;
font-stretch: initial;
font-stretch: revert;
font-stretch: unset;
```


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

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

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

| 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 é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 pourcentages 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 |  |  |  |  |  |  |  |  |  |

* 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 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.
### Syntaxe formelle
```

font-stretch =   
  normal              |  
  <percentage [0,∞]>  |  
  ultra-condensed     |  
  extra-condensed     |  
  condensed           |  
  semi-condensed      |  
  semi-expanded       |  
  expanded            |  
  extra-expanded      |  
  ultra-expanded        
  
```

Exemples
--------

### Avec un pourcentage

Spécifications
--------------

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

**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.

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

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

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

* `font-style`
* `font-weight`
* Apprendre — Notions fondamentales sur le texte et la mise en forme avec les polices