Incohérence entre le nombre et le texte

Question

J'ai eu d'étranges problèmes d'espacement. Il y a un nombre et chaque texte parallèle. Et il y a différents espacements entre 1, 4, 7 et 'chaque' texte. Comment pouvons-nous résoudre ce problème ou il ne peut pas être réparé. Je n'ai pas utilisé d'espacement et de propriétés CSS supplémentaires.

@import url('https://fonts.googleapis.com/css?family=Spectral'); 
 
@import url('https://fonts.googleapis.com/css?family=Open+Sans|Spectral'); 
 

 
.bigger { 
 
    font-size: 40px; 
 
} 
 

 
p { 
 
    font-family: 'Open Sans', sans-serif; 
 
}

<p> 
 
    <span class="bigger">81</span> 
 
    <small>each</small> 
 
</p> <br> 
 
<p> 
 
    <span class="bigger">84</span> 
 
    <small>each</small> 
 
</p> <br> 
 
<p> 
 
    <span class="bigger">87</span> 
 
    <small>each</small> 
 
</p> <br>

Answer 1

C'est la question de l'espacement des lettres de la police. Vous devez utiliser une police monospace pour obtenir le même espacement pour tous les caractères.

Essayez l'extrait ci-dessous.

.bigger { 
 
    font-size: 40px; 
 
} 
 

 
p { 
 
    font-family: monospace; 
 
}

<p> 
 
    <span class="bigger">81</span> 
 
    <small>each</small> 
 
</p> <br> 
 
<p> 
 
    <span class="bigger">84</span> 
 
    <small>each</small> 
 
</p> <br> 
 
<p> 
 
    <span class="bigger">87</span> 
 
    <small>each</small> 
 
</p> <br>

Answer 2

Le caractère 1 (et 7 parfois) seraient généralement espacés dans la plupart des polices. Si vous souhaitez un espacement uniforme, vous devriez envisager d'utiliser des polices monospace.

Une autre amélioration que vous pouvez apporter à votre code consiste à supprimer les espaces entre les balises.

S'il vous plaît vérifier le code ci-dessous:

@import url('https://fonts.googleapis.com/css?family=Spectral'); 
 
@import url('https://fonts.googleapis.com/css?family=Open+Sans|Spectral'); 
 

 
.bigger { 
 
    font-size: 40px; 
 
} 
 

 
p { 
 
    font-family: 'Open Sans', sans-serif; 
 
}

<p> 
 
    <span class="bigger">81</span><small>each</small> 
 
</p> <br> 
 
<p> 
 
    <span class="bigger">84</span><small>each</small> 
 
</p> <br> 
 
<p> 
 
    <span class="bigger">87</span><small>each</small> 
 
</p> <br>

Answer 3

Bien que l'utilisation d'une police est une solution monospace agréable, vous pouvez résoudre avec votre police d'origine si elle possède les caractéristiques OpenType correctes. La différence dans l'espace occupé par un chiffre est due à la largeur du chiffre (par opposition à l'espacement des caractères ou à l'espacement des lettres, comme suggéré dans les autres réponses). La largeur est proportionnelle - le 1 est plus étroit que le 4.

Mais une police peut également offrir les chiffres des tableaux, où chaque chiffre est de même largeur:

Vous pouvez activer cela dans CSS avec font-feature-settings: 'tnum';. Ou pour utiliser d'autres fonctionnalités OpenType et prendre soin des incohérences du navigateur, voir Utility OpenType.