font-stretch - Propriété CSS
Résumé des caractéristiques de la propriété font-stretch
normal
| ultra-expanded
| extra-expanded
| expanded
| semi-expanded
| semi-condensed
| condensed
| extra-condensed
| ultra-condensed
normal
font-stretch
passe progressivement d'une valeur à une autre.Description des propriétés font-stretch
et font-width
.
font-stretch
et font-width
définissent l'étirement ou la compression des caractères dans le sens horizontal.
Cette propriété ne fonctionne que avec les polices qui proposent plusieurs glyphes pour chaque caractère, correspondant à plusieurs étirements, ou avec les polices à largeur variable.
Voici ce que devrait rendre les différentes valeurs de ces propriétés sur une police à largeur totalement variable (il s'agit ici d'une simulation).
La plupart des polices ne proposent que une ou deux variantes de chaque caractère dans des étirements différents. Le navigateur sélectionne celle qui s'approche le plus de l'étirement (ou la compression) demandé. Le navigateur n'est pas censé simuler l'étirement ou la compression des caractères.
Remarque : font-stretch
et font-width
sont aussi des descripteurs, qui s'utilisent avec la directive @font-face
.
Syntaxes pour font-stretch
et font-width
.
stretch
est une des valeurs prédéfinies décrites ci-après.%
est un pourcentage dont l'évaluation est un nombre sans unité.
- font-stretch: normal;
Valeur par défaut. L'espacement des caractères n'est pas modifié.
- font-stretch: ultra-condensed; font-stretch: extra-condensed; font-stretch: condensed; font-stretch: semi-condensed;
Les caractères sont comprimés, conformément à la valeur choisie :
semi-condensed
87,5% condensed
75% extra-condensed
62,5% ultra-condensed
50% - font-stretch: semi-expanded; font-stretch: expanded; font-stretch: extra-expanded; font-stretch: ultra-expanded;
Les caractères sont étirés, conformément à la valeur indiquée.
semi-expanded
112,5% expanded
125% extra-expanded
150% ultra-expanded
200% - font-stretch: 75%;
Un pourcentage, positif, inférieur ou supérieur à 100%. Il est calculé par rapport à la largeur normale des caractères de la police. Une valeur de 100% ne change donc pas l'espacement des caractères. Une valeur inférieure à 100% correspond à un rapprochement des caractères, et bien entendu, une valeur supérieure à 100% correspond à un espacement plus grand des caractères.
- font-stretch:
initial
; font-stretch:inherit
; font-stretch:revert
; font-stretch:revert-layer
; font-stretch:unset
;La valeur initiale est :
.normal
Animation de la propriété font-stretch
.
Comme on peut le voir ci-dessous, l'animation se fait de façon saccadée, même si les valeurs de font-stretch
sont
exprimées en pourcentages.
(1) Pangramme qui était utilisé pour tester les téléscripteurs. La phrase n'a pas d'accents car ceux-ci ne pouvaient pas se transmettre (Wikipedia).
Simulateur.
(1) Pangramme anonyme.
Prise en charge par les navigateurs (compatibilité).
font-stretch
.
font-stretch
.
font-stretch
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
Oméra mini
Voir aussi, dans le même module de standardisation que font-stretch
.
Les spécifications CSS éditées par le W3C sont organisées en modules. font-stretch
fait partie du Module CSS - Polices de caractères (CSS Fonts Module). Les définitions suivantes sont également décrites dans ce même module.