font-stretch

Brouillon
Cette page n'est pas terminée.

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 initialenormal
Médiatous
Valeur calculéecomme spécifié
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Syntaxe

/* 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-absolute>{1,2}


<font-stretch-absolute> = normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | <percentage>

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.

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

Spécifications

Spécification État Commentaires
CSS Fonts Module Level 4
La définition de 'font-stretch' dans cette spécification.
Version de travail
CSS Fonts Module Level 3
La définition de 'font-stretch' dans cette spécification.
Candidat au statut de recommandation

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
font-stretchChrome Support complet 62Edge Support complet 17Firefox Support complet 62IE Aucun support NonOpera Support complet 49Safari Support complet 10.1WebView Android Support complet 62Chrome Android Support complet 62Firefox Android Support complet 62Opera Android Support complet 41Safari iOS Support complet 10.3Samsung Internet Android Support complet 6.0

Légende

Support complet  
Support complet
Aucun support  
Aucun support

Voir aussi