Font-stretch / font-width - Propriétés CSS

font-stretch
font-width

Résumé des caractéristiques de la propriété font-stretch

Description rapide
Modifie l'étirement ou la compression des caractères.
Statut
Standard
Utilisable sur
HTML, SVG
Valeurs prédéfinies
normal | ultra-expanded | extra-expanded | expanded | semi-expanded | semi-condensed | condensed | extra-condensed | ultra-condensed
Pourcentages
Calculés par rapport à la largeur normale des caractères.
Valeur initiale
normal
Héritée par défaut
Oui.
Type d'animation
Computed value : lors d'une animation, la propriété font-stretch passe progressivement d'une valeur à une autre.
Module W3C
Module CSS - Polices de caractères
Références (W3C)
 🡇  
 🡅  
Statut du document: WD (document de travail)
Statut du document: REC (recommandation)

Schéma de la syntaxe de font-stretch.

Font-stretch property - Syntax diagramSyntax diagram of the font-stretch CSS property. See stylescss.free.fr for details. normal normal ultra-condensed ultra-condensed extra-condensed extra-condensed condensed condensed semi-condensed semi-condensed semi-expanded semi-expanded expanded expanded extra-expanded extra-expanded ultra-expanded ultra-expanded % %font-stretch:;font-stretch:;
Schéma syntaxique de la propriété font-stretch.
Cliquez sur les liens du schéma pour plus de précisons sur les valeurs.

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.

⚠
Ces deux propriétés sont synonymes. Elles sont néanmoins conservées toutes les deux pour des raison de compatibilité avec l'existant.

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

a
ultra-condensed
a
extra-condensed
a
condensed
a
semi-condensed
a
normal
a
semi-expanded
a
expanded
a
extra-expanded
a
ultra-expanded

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.

  • 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; (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.

Monsieur Jack, vous dactylographiez bien mieux que votre ami Wolf (1)

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

Police :
font-stretch :
font-width :
Joyeux, ivre, fatigué, le nez qui pique, Clown Hary skie dans l’ombre. (2)

(2) Pangramme anonyme.

Compatibilité des navigateurs avec font-stretch.

Colonne 1
Support de la propriété font-stretch qui autorise, pour les polices variables, de choisir une largeur de caractères.
Colonne 2
Support des pourcentages pour la valeur de la propriété font-stretch.
Colonne 3
Support du descripteur font-stretch pour la directive @font-face.
Cette fonctionnalité est maintenant obsolète.
1
Propriété
font-stretch
2
Valeur en
pourcentages
3
Descripteur
font-stretch
Estimation de la prise en charge globale.
96%
94%
95%

Navigateurs 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

Voir le site Caniuse.com pour plus d'informations de compatibilité.
Caniuse
Caniuse
Caniuse

Histoire de la propriété font-stretch.

Voir aussi, à propos des polices de caractères.

Les propriétés concernant les polices de caractères sont regroupées dans le module CSS Fonts Module. Vous trouvez dans ce module également les définitions suivantes :

Propriétés :

font
Raccourci pour définir la plupart des propriétés concernant les polices de caractères.
✗
font-effect
Permet d'appliquer quelques effets au texte : relief, bordure...
font-family
Sélectionne une police de caractères parmi celles qui sont disponibles ou celles qui sont téléchargées.
⚠
font-feature-settings
Permet d'exploiter les fonctionnalités spécifiques des polices de caractères OTF, WOFF, etc.
font-kerning
Ajustement du crénage entre caractères.
⚠
font-language-override
Définit le langage à prendre en compte lors du choix des caractères.
⚠
font-optical-sizing
Optimise la forme des caractères en fonction de leur taille.
font-palette
Définit la palette de couleurs utilisable pour les polices de caractères colorées.
font-size
Ajuste la taille des caractères, ce qui impacte aussi les units comme em, ex, etc.
font-size-adjust
Définition du coefficient d'aspect de la police.
✗
font-smooth
Définit si un algorithme de lissage doit être utilisé et lequel.
font-style
Sélectionne les styles italique ou oblique de la police de caractères.
font-synthesis
Autorise ou non le calcul des styles manquants dans la police de caractères.
⚠
font-synthesis-position
Autorise ou non le navigateur à synthétiser les caractères en exposant ou en indice.
⚠
font-synthesis-small-caps
Autorise ou non le navigateur à calculer le glyphes des caractères en petites capitales.
⚠
font-synthesis-style
Définit si le navigateur est autorisé à synthétiser les formes italiques des caractères.
⚠
font-synthesis-weight
Définit si le navigateur peut calculer ou non le glyphe des caractères gras.
font-variant
Raccourci permettant de définir les attributs typographiques évolués : ligatures, substitution de caractères, etc.
font-variant-alternates
Définit la substitution de caractères (polices OTF, WOFF).
font-variant-caps
Applique une capitalisation des caractères.
font-variant-east-asian
Typographie spécifique aux caractères chinois ou japonais.
⚠
font-variant-emoji
Choisit entre une présentation en emoji ou en texte.
font-variant-ligatures
Active ou désactive la ligature des caractères.
font-variant-numeric
Définit le mode d'affichage des nombres évolués : fractions, numéros, etc.
font-variant-position
Mise en exposant ou en indice des caractères.
⚠
font-variation-settings
Donne accès aux possibilités stylistiques des polices OTF.
font-weight
Sélectionne une graisse pour les caractères.
font-width
Synonyme de font-stretch (largeur/élargissement des caractères).

Fonctions :

⚠
palette-mix()
Établit le mélange de deux palettes de couleurs issus de deux polices de caractères différentes.

Directives :

@font-face
Définit tous les paramètres d'une police de caractères téléchargeable.
⚠
@font-feature-values
Définit les variantes typographiques à utiliser.
@font-palette-values
Définit une palette de couleurs applicable ensuite à une police de caractères.

Descripteurs :

ascent-override
Descripteur pour @font-face. Définit la hauteur des caractères au dessus de la ligne de base.
descent-override
Descripteur pour @font-face. Définit la hauteur des caractères au dessous de la ligne de base.
⚠
font-display
Descripteur pour @font-face. Détermine le comportement du navigateur face aux polices de caractères longues à charger.
line-gap-override
Descripteur pour @font-face. Définit l'interligne de la police.
src
Définit la source d'un fichier de police de caractères à télécharger, ou d'une image à afficher.
unicode-range
Descripteur pour @font-face. Définit la plage des codes de caractères à télécharger dans une police.