font-stretch
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2017.
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
/* 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
Error: could not find syntax for this item
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
Specification |
---|
CSS Fonts Module Level 4 # font-prop-desc |
Compatibilité des navigateurs
BCD tables only load in the browser