Font-stretch / font-width - Propriétés 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-condensednormalfont-stretch passe progressivement d'une valeur à une autre.Schéma de la syntaxe de font-stretch.
font-stretch.Cliquez sur les liens du schéma pour plus de précisons sur les valeurs.
Télécharger le schéma en SVG.
Description des termes utilisés sur le schéma :
%est un pourcentage calculé par rapport à la largeur normale des caractères.
Description des propriétés font-stretch et font-width.
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.
Voyez également la page sur letter-spacing pour une autre propriété presque équivalente à font-stretch.
Font-stretch est utilisable avec :
En plus d'être une propriété, font-stretch s'utilise comme descripteur pour la directive @font-face.
Syntaxes pour font-stretch et font-width.
- 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-condensed87,5% condensed75% extra-condensed62,5% ultra-condensed50% - 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-expanded112,5% expanded125% extra-expanded150% ultra-expanded200% - 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; (
normal) font-stretch: inherit; font-stretch: revert; font-stretch: revertLayer; font-stretch: unset;Les valeurs communes sont présentées sur ces pages :
initial,inherit,revert,revert-layer,unset.
Exemple d'animation de 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).
Exemple interactif avec la propriété font-stretch.
Le simulateur vous permet de choisir une valeur pour la propriété font-stretch. On constate que, bien que la propriété soit reconnue, il y a
de grosses limitations suivant la police choisie.
(2) Pangramme anonyme.
Compatibilité des navigateurs avec font-stretch.
font-stretch qui autorise, pour les polices variables, de choisir une largeur de caractères.font-stretch.font-stretch pour la directive @font-face.Cette fonctionnalité est maintenant obsolète.
font-stretchpourcentages
font-stretchNavigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Internet Explorer
KaiOS Browser
Opéra Mobile
Opéra
Safari
Safari sur IOS
Firefox pour Androïd
Samsung Internet
Chrome
Edge
Firefox
Androïd Brower
Chrome pour Androïd
Baidu Browser
QQ Browser
UC Browser pour Androïd
Opéra mini
Histoire de la propriété font-stretch.
-
Module CSS - Polices de caractères - Niveau 3
Cette spécification concerne les polices de caractères. Une police de caractères contient la représentation visuelle des caractères. Dans sa forme la plus simple il s'agit juste d'associer les codes des caractères aux formes de ceux-ci.
Au sein d'une famille de caractère, les formes sont définies, mais peuvent varier en épaisseur du trait, inclinaison, largeur, etc. Les propriétés CSSfont-...permettent de choisir l'aspect final des caractères.
Les polices de caractères peuvent être localisées sur le poste de l'internaute ou téléchargées.Concernantfont-stretch. Première présentation de la propriétéfont-stretch.
21 Juillet 1997Document de travail.
03 Octobre 2013Candidat à la recommandation.
14 Août 2018Proposé à la recommandation.
20 Septembre 2018Recommandation. -
Module CSS - Polices de caractères - Niveau 4
Ce niveau 4 de la spécification sur les polices de caractères reprend ce qui est défini dans le niveau 3. Il ajoute la possibilité de définir ce qui se passe quand une police est longue à charger ou absente. Il ajoute également le support des polices colorées et précise de nombreux points encore mal définis dans le niveau 3.
Concernantfont-stretch. Précision concernant l'ambigüité entre les propriétéfont-stretchetfont-width.11 Juillet 2017Document de travail.
Voir aussi, à propos des polices de caractères.
Les propriétés concernant les polices de caractères sont regroupées dans le module Module CSS - Polices de caractères. Vous trouvez dans ce module également les définitions suivantes :
Propriétés :
em, ex, etc.Fonctions :
Directives :
Descripteurs :
@font-face. Définit la hauteur des caractères au dessus de la ligne de base.@font-face. Définit la hauteur des caractères au dessous de la ligne de base.@font-face. Détermine le comportement du navigateur face aux polices de caractères longues à charger.@font-face. Définit l'interligne de la police.@font-face. Définit la plage des codes de caractères à télécharger dans une police.