font-width

Syntaxe

/* Valeurs uniques */
font-width: ultra-condensed;
font-width: extra-condensed;
font-width: condensed;
font-width: semi-condensed;
font-width: normal;
font-width: semi-expanded;
font-width: expanded;
font-width: extra-expanded;
font-width: ultra-expanded;
font-width: 50%;
font-width: 100%;
font-width: 200%;

/* Valeurs multiples */
font-width: 75% 125%;
font-width: condensed ultra-condensed;

Le descripteur font-width peut prendre une seule valeur parmi la liste ci-dessous.

Valeurs

normal

Définit une police normalement condensée.

semi-condensed, condensed, extra-condensed, ultra-condensed

Définit une police plus condensée que la normale, l'ultra-condensée étant la plus condensée.

semi-expanded, expanded, extra-expanded, ultra-expanded

Définit une police plus étendue que la normale, l'ultra-étendue étant la plus étendue.

<percentage>

Une valeur en pourcentage (<percentage>) comprise entre 50 % et 200 % (inclus). Les valeurs négatives ne sont pas autorisées pour ce descripteur.

Dans les versions antérieures de la spécification font-width, le descripteur n'acceptait que les neuf valeurs clés. CSS Fonts Level 4 étend la syntaxe pour accepter également une valeur <percentage>. Cela permet aux polices variables d'offrir une variation continue des largeurs de caractères. Pour les polices variables TrueType ou OpenType, la variation wdth est utilisée pour implémenter des largeurs variables.

Si la police ne fournit pas de variante correspondant exactement à la valeur donnée, les valeurs inférieures à 100% correspondent à une police condensée, et les valeurs supérieures ou égales à 100% correspondent à une police étendue.

Correspondance des mots-clés avec les valeurs numériques

Le tableau ci-dessous montre la correspondance entre les valeurs de mots-clés et les pourcentages numériques :

Polices variables

La plupart des polices ont une largeur particulière qui correspond à l'une des valeurs de mot-clé. Cependant, les polices variables peuvent prendre en charge une gamme de largeurs avec une granularité fine, offrant au·à la concepteur·ice un degré de contrôle plus élevé sur la largeur choisie. Pour cela, les plages de pourcentages sont utiles.

Pour les polices variables TrueType ou OpenType, la variation wdth est utilisée pour implémenter des largeurs de glyphe variables.

Accessibilité

Les personnes dyslexiques et celles ayant d'autres troubles cognitifs peuvent avoir des difficultés à lire des polices trop condensées, en particulier si la police présente un faible taux de contraste des couleurs.

• Comprendre le WCA sur le MDN, explication de la règle 1.4
• Comprendre les critères de réussite 1.4.8 | Comprendre le W3C WCAG 2.0 de la W3C ^(angl.)

Définition formelle

Syntaxe formelle

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

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

Exemples

Définir une plage de pourcentages pour font-width

L'exemple suivant utilise la police League Mono ^(angl.). Il synthétise différentes familles de polices à partir du même fichier de police en utilisant le descripteur font-width avec différents mots-clés et pourcentages.

<p>League Mono</p>
<p>League Mono</p>
<p>League Mono</p>

@font-face {
  font-family: "League Mono Ultra Condensed";
  src: url("/shared-assets/fonts/LeagueMono-VF.ttf") format("truetype");
  font-width: ultra-condensed; /* identique à 50% */
}

@font-face {
  font-family: "League Mono Normal";
  src: url("/shared-assets/fonts/LeagueMono-VF.ttf") format("truetype");
  font-width: 100%; /* identique à normal */
}

@font-face {
  font-family: "League Mono Ultra Expanded";
  src: url("/shared-assets/fonts/LeagueMono-VF.ttf") format("truetype");
  font-width: ultra-expanded; /* identique à 200% */
}

p:nth-child(1) {
  font-family: "League Mono Ultra Condensed", sans-serif;
}

p:nth-child(2) {
  font-family: "League Mono Normal", sans-serif;
}

p:nth-child(3) {
  font-family: "League Mono Ultra Expanded", sans-serif;
}

Fournir un repli avec font-stretch

Comme font-width n'est pas encore largement pris en charge par les navigateurs, il peut être utile d'inclure le descripteur hérité font-stretch comme repli. Placez font-stretch avant font-width afin que les navigateurs compatibles utilisent le descripteur moderne :

@font-face {
  font-family: "MyFont";
  src: url("my-font.woff2") format("woff2");
  font-stretch: condensed; /* pour les navigateurs qui ne prennent pas en charge font-width */
  font-width: condensed;
}

Spécifications

Compatibilité des navigateurs

Voir aussi

• L'alias du descripteur hérité font-stretch avec un meilleur support des navigateurs
• Le descripteur font-display
• Le descripteur font-family
• Le descripteur font-weight
• Le descripteur font-style
• La propriété font-feature-settings
• Le descripteur font-variation-settings
• Le descripteur src
• Le descripteur unicode-range