La letter-spacingpropriété contrôle la quantité d'espace entre chaque lettre dans un élément ou un bloc de texte donné. Les valeurs prises en charge par letter-spacingincluent les valeurs relatives à la police (em, rem), les valeurs relatives aux parents (pourcentage), les valeurs absolues (px) et la normalpropriété, qui réinitialise la police par défaut.
L'utilisation de valeurs relatives à la police est recommandée, afin que les letter-spacingaugmentations ou diminutions de manière appropriée lorsque la taille de la police est modifiée, soit par conception, soit par comportement de l'utilisateur.
p ( /* 16 * 0.0625 = 1px */ letter-spacing: 0.0625em; )Le point le plus important à noter lors de l'utilisation letter-spacingest que la valeur spécifiée ne change pas la valeur par défaut, elle est ajoutée à l'espacement par défaut appliqué par le navigateur (en fonction des métriques de police). letter-spacingprend également en charge les valeurs négatives, qui resserreront l'apparence du texte plutôt que de le desserrer.
Points d'interêts
- Valeurs de sous-pixels: dans la plupart des navigateurs, la spécification d'une valeur qui est inférieure à
1pxn'entraînera aucuneletter-spacingapplication. Actuellement, Firefox 14+ et IE 10 prennent en charge la disposition des sous-pixels; Opera et WebKit ne le font pas. Le correctif est arrivé, donc WebKit prend désormais en charge l'espacement des lettres des sous-pixels. - La
letter-spacingpropriété peut être animée avec des transitions CSS. - L'un des moyens de lutter contre l'espace entre les éléments de bloc en ligne consiste à définir
letter-spacing: -4px;sur le conteneur parent des éléments de bloc en ligne. Vous devrez ensuite réinitialiserletter-spacing: normal;les éléments enfants. - Il est rarement, voire jamais, une bonne idée d'utiliser des lettres minuscules et des espaces de lettres.
Prise en charge du navigateur
| Chrome | Safari | Firefox | Opéra | C'EST À DIRE | Android | iOS |
|---|---|---|---|---|---|---|
| Travaux | Travaux | Travaux | Les plus | Travaux | Travaux | Travaux |
Remarque sur la prise en charge des navigateurs mobiles: certaines versions d'Opera Mobile, les implémentations non standard de WebKit et le navigateur NetFront ne le prennent pas en charge letter-spacing. Les détails sont détaillés dans le lien QuirksMode ci-dessus.