html - google - Brecha incoherente entre el número y el texto

google fonts

Question

Tengo problemas de espaciamiento extraños. Hay un número y cada texto en paralelo. Y hay diferentes espacios entre 1, 4, 7 y ''cada'' texto. ¿Cómo podemos solucionar este problema o no se puede solucionar? No he usado ningún espaciado ni propiedades CSS adicionales.

@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

Aunque usar una fuente monoespacial es una buena solución, puede resolver esto con su fuente original si tiene las características correctas de OpenType.

La diferencia en el espacio que ocupa un dígito es causada por el ancho del dígito (a diferencia del interletraje o espacio entre letras, como se sugiere en las otras respuestas). El ancho es proporcional: el 1 es más estrecho que el 4.

Pero una fuente también puede ofrecer figuras tabulares , donde cada dígito tiene el mismo ancho:

Puede habilitar esto en CSS con font-feature-settings: ''tnum''; . O para usar otras características de OpenType y ocuparse de las incoherencias del navegador, vea Utility OpenType .

Answer 2

El carácter 1 (y 7 a veces) normalmente estaría espaciado en la mayoría de las fuentes. Si desea un espaciado uniforme, debe considerar el uso de fuentes monoespaciales.

Otra mejora que puede hacer a su código es eliminar los espacios entre las etiquetas.

Por favor, consulte el siguiente código:

@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

Esa es la cuestión del espaciado entre letras de la fuente. Debe usar una fuente monospace para lograr el mismo espaciado para todos los caracteres.

Prueba el siguiente fragmento.

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