Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

CSS - Propriété font-stretch

Description de la propriété font-stretch.

font-stretch définit l'étirement ou la compression des caractères.

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 devraient rendre les différentes valeurs de la propriété font-stretch 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.

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

Syntaxes pour font-stretch.

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

    La valeur initiale est normal.

  • font-stretch: unset; font-stretch: inherit;

    Reportez-vous à la description générale de ces valeurs.

Simulateur.

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

(1) Pangramme anonyme.

Voir aussi...

Polices et caractères - Propriétés.

  • font : Raccourci pour définir la plupart des propriétés concernant les polices de caractères.
  • font-display : Détermine le comportement du navigateur face aux polices de caractères longues à charger.
  • font-family : Définit le nom de la police de caractères.
  • 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-size : Ajuste la taille des caractères.
  • font-size-adjust : Définition du coefficient d'aspect de la police.
  • 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-variant : Raccourci permettant de définir les attributs typographiques évolués : ligatures, substitution de caractères, etc.
  • font-variant-alternates : Met en œuvre 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-ligatures : Active ou désactive la ligature des caractères.
  • font-variant-numeric : Met en œuvre les modes d'affichage des nombres évolués : fractions, numéros, etc.
  • font-weight : Sélectionne une graisse pour les caractères.
  • text-decoration : Choisit le soulignement, le surlignement ou la rayure du texte.
  • text-decoration-color : Définit la couleur du trait de décoration.
  • text-decoration-line : Type de décoration : souligné, barré, etc.
  • text-decoration-style : Type de trait pour la décoration : plein, pointillé, etc.
  • text-shadow : Ombrage du texte.
  • text-transform : Casse du texte (minuscules, majuscules...).

Polices et caractères - Directives.

  • @charset : Indique le jeu de caractères utilisé dans la feuille de styles.
  • @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.