Il carattere di spostamento "Y" in span aumenta il margine al carattere successivo

Question

Nel mio progetto corrente, ho bisogno di racchiudere ogni singolo carattere di una frase all'interno di una span, così posso misurare la distanza dall'inizio della frase fino a il personaggio in questione.

Purtroppo, sembra che il confezionamento alcuni dei personaggi (che ho trovato per essere vero per "Y" e "T") in un arco, aggiunge un ulteriore margine a destra, in modo tutto il testo viene allungato :

div { font-size: 100px; }

<h2>Expected (same width):</h2> 
 
<div>A-A-A-A</div> 
 
<div> 
 
    <span>A</span><span>-</span><span>A</span><span>-</span><span>A</span><span>-</span><span>A</span> 
 
</div> 
 

 
<h2>Unexpected (different width):</h2> 
 
<div>Y-Y-Y-Y</div> 
 
<div> 
 
    <span>Y</span><span>-</span><span>Y</span><span>-</span><span>Y</span><span>-</span><span>Y</span> 
 
</div>

Se si esegue il frammento, vi renderete conto che "AAAA" è significativamente più ampio quando avvolto in campate.

Perché è così? Come posso prevenire questo comportamento?

Answer 1

Se ciò sembra dipendere dal tipo di carattere predefinito del browser. Alcuni tipi di carattere possono avere crenature (regolazioni di spaziatura lettere) che riducono lo spazio tra una capitale Y e una breve lettera o trattino.

Sembra che il motore di rendering di testo di Chrome utilizzi più crenatura rispetto ad altri browser, o non riesce ad applicarlo quando c'è un tag html tra le lettere.

È possibile risolvere questo problema dando il vostro div un determinato font-family:

div { 
    font-family: Courier New; 
} 

(non deve essere un carattere a spaziatura fissa, ma quelli sono garantiti per non aver crenatura)

Answer 2

È può risolvere che con l'impostazione font-kerning:none; al div

Like this

div { font-size: 100px; font-kerning: none; } 

https://developer.mozilla.org/en-US/docs/Web/CSS/font-kerning

Answer 3

Qualunque font mono-spazio può contribuire come ogni carattere è la stessa larghezza.

Si potrebbe anche provare questo:
https://css-tricks.com/forums/topic/characterletter-widths-in-css/