font-stretch

Baseline Large disponibilité

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis septembre 2017.

Note : La propriété font-stretch a été renommée en font-width dans la spécification CSS Fonts ^(angl.). Pour préserver la compatibilité, la spécification conserve font-stretch comme un alias hérité de la propriété font-width.

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

Exemple interactif

font-stretch: condensed;

font-stretch: expanded;

font-stretch: ultra-expanded;

font-stretch: 50%;

font-stretch: 100%;

font-stretch: 150%;

<section class="default-example" id="default-example">
  <p class="transition-all" id="example-element">
    Londres. Le trimestre de la Saint-Michel vient de se terminer, et le Lord
    Chancelier siège dans le Lincoln's Inn Hall. Un temps de novembre
    implacable. Autant de boue dans les rues que si les eaux venaient tout juste
    de se retirer de la surface de la terre, et il ne serait pas étonnant de
    croiser un Mégalosaure, long d'une quarantaine de pieds, se dandinant comme
    un lézard éléphantesque sur Holborn Hill.
  </p>
</section>

@font-face {
  src: url("/shared-assets/fonts/LeagueMono-VF.ttf") format("truetype");
  font-family: "League";
  font-style: normal;
  font-weight: normal;
}

section {
  font-size: 1.2em;
  font-family: "League", sans-serif;
}

Syntaxe

css

/* Valeurs avec un mot-clé */
font-stretch: normal;
font-stretch: ultra-condensed;
font-stretch: extra-condensed;
font-stretch: condensed;
font-stretch: semi-condensed;
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: revert-layer;
font-stretch: unset;

Cette propriété peut être définie avec un seul mot-clé de type pourcentage (<percentage>).

Valeurs

normal: Définit une fonte normalement condensée.
semi-condensed, condensed, extra-condensed, ultra-condensed: Définit une fonte plus condensée que la normale, ultra-condensed étant la plus condensée.
semi-expanded, expanded, extra-expanded, ultra-expanded: Définit une fonte plus étendue que la normale, ultra-expanded étant la plus étendue.
<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é.

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 donnée de font-stretch dépend des fontes prises en charge par la police en question. Si la police ne fournit pas de fonte correspondant exactement à la valeur donnée, les valeurs inférieures à 100% correspondent à une fonte condensée, et les valeurs supérieures ou égales à 100% correspondent à une fonte étendue.

Le tableau ci-dessous illustre l'effet de la définition de différentes valeurs en pourcentage de font-stretch sur deux polices différentes :

@font-face {
  font-family: "Inconsolata";
  src: url("https://fonts.gstatic.com/s/inconsolata/v31/QlddNThLqRwH-OJ1UHjlKENVzlm-WkL3GZQmAwPyya15.woff2")
    format("woff2");
}

@font-face {
  font-family: "Anek Malayalam";
  src: url("https://fonts.gstatic.com/s/anekmalayalam/v4/6qLUKZActRTs_mZAJUZWWkhke0nYa-f6__Azq3-gP1W7db9_.woff2")
    format("woff2");
}

body {
  font-family: system-ui;
}

table {
  border-collapse: collapse;
  width: 100%;
}

tbody th {
  text-align: right;
}

th,
td {
  padding: 0.25rem;
  font-weight: normal;
  text-align: center;
}

td {
  border: solid;
  border-width: 1px;
  font-size: 5rem;
}

.inconsolata {
  font-family: "Inconsolata", sans-serif;
}

.anek-malayalam {
  font-family: "Anek Malayalam", sans-serif;
}

td:nth-child(2) {
  font-stretch: 50%;
}

td:nth-child(3) {
  font-stretch: 62.5%;
}

td:nth-child(4) {
  font-stretch: 75%;
}

td:nth-child(5) {
  font-stretch: 87.5%;
}

td:nth-child(6) {
  font-stretch: 100%;
}

td:nth-child(7) {
  font-stretch: 112.5%;
}

td:nth-child(8) {
  font-stretch: 125%;
}

td:nth-child(9) {
  font-stretch: 150%;
}

td:nth-child(10) {
  font-stretch: 200%;
}

<table>
  <thead>
    <tr>
      <th scope="row"></th>
      <th scope="col">50%</th>
      <th scope="col">62.5%</th>
      <th scope="col">75%</th>
      <th scope="col">87.5%</th>
      <th scope="col">100%</th>
      <th scope="col">112.5%</th>
      <th scope="col">125%</th>
      <th scope="col">150%</th>
      <th scope="col">200%</th>
    </tr>
  </thead>
  <tbody>
    <tr class="inconsolata">
      <th scope="row">Inconsolata</th>
      <td>e</td>
      <td>e</td>
      <td>e</td>
      <td>e</td>
      <td>e</td>
      <td>e</td>
      <td>e</td>
      <td>e</td>
      <td>e</td>
    </tr>
    <tr class="anek-malayalam">
      <th scope="row">Anek Malayalam</th>
      <td>e</td>
      <td>e</td>
      <td>e</td>
      <td>e</td>
      <td>e</td>
      <td>e</td>
      <td>e</td>
      <td>e</td>
      <td>e</td>
    </tr>
  </tbody>
</table>

Inconsolata ^(angl.) est une police variable qui propose une plage continue de largeurs de 50% à 200%.
Anek Malayalam ^(angl.) est une police variable Google qui prend en charge des largeurs de 75% à 125%. Les valeurs en dehors de cette plage sélectionnent la fonte la plus proche.

Définition formelle

Valeur initiale	`normal`
Applicabilité	tous les éléments et le texte. S'applique aussi à `::first-letter` et `::first-line`.
Héritée	oui
Valeur calculée	comme défini
Type d'animation	par type de valeur calculée

Syntaxe formelle

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

Exemples

Définir les pourcentages d'étirement de police

html

<p class="condensed">un lézard éléphantesque</p>
<p class="normal">un lézard éléphantesque</p>
<p class="expanded">un lézard éléphantesque</p>

css

@font-face {
  src: url("/shared-assets/fonts/LeagueMono-VF.ttf") format("truetype");
  font-family: "LeagueMonoVariable";
  font-style: normal;
}

p {
  font:
    1.5rem "LeagueMonoVariable",
    sans-serif;
}

.condensed {
  font-stretch: 50%;
}

.normal {
  font-stretch: 100%;
}

.expanded {
  font-stretch: 200%;
}

Spécifications

Spécification
CSS Fonts Module Level 4 # font-stretch-prop

Compatibilité des navigateurs

Voir aussi

Le descripteur font-stretch pour @font-face
La propriété font-width moderne, remplaçant font-stretch
La propriété font-style
La propriété font-weight
L'attribut SVG font-stretch
Apprendre : Mise en forme fondamentale du texte et des polices
Le module de polices CSS

Aider à améliorer MDN

Apprendre à contribuer

Cette page a été modifiée le 17 mars 2026 par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu