In meinem aktuellen Projekt muss ich jedes einzelne Zeichen eines Satzes innerhalb eines Bereichs umbrechen, sodass ich den Abstand vom Anfang des Satzes bis zum fraglichen Zeichen messen kann.
Leider scheint es, dass einige der Zeichen (ich fand es für "Y" und "T" wahr) in einem Bereich hinzugefügt wird, fügt einen zusätzlichen Rand rechts hinzu, so dass der Der ganze Text wird gestreckt:
Wenn Sie das Snippet ausführen, werden Sie feststellen, dass "Y-Y-Y-Y" wesentlich breiter ist, wenn es in SPANs eingeschlossen wird.
Warum ist das so? Wie kann ich dieses Verhalten verhindern?
Ob dies geschieht, hängt von der Standardschriftart Ihres Browsers ab. Einige Schriftarten verfügen möglicherweise über Unterschneidungen (Anpassungen des Buchstabenabstands), die den Abstand zwischen einem Großbuchstaben Y und einem kurzen Buchstaben oder Bindestrich verringern.
Es scheint, dass die Text-Rendering-Engine von Chrome entweder mehr Kerning verwendet als andere Browser oder es nicht anwendet, wenn sich zwischen den Buchstaben ein HTML-Tag befindet.
Sie können dieses Problem lösen, indem Sie Ihrer div eine bestimmte Schriftfamilie geben:
(muss keine Monospace-Schriftart sein, aber diese haben garantiert kein Kerning)