Html 在chrome中，同一浏览器、字体、大小等的字母间距不同

我的任务是从头重写一个页面的html和css，但达到相同的视觉效果。我在尝试匹配两页之间元素的字母间距时发现了一个非常奇怪的结果。旧元素是

字母间距：0

，但为了匹配字母间距，我必须将新元素设置为

字母间距：0.015 em

旧的

新的

我手头没有合适的图像编辑软件，无法将它们相互叠加，但在标签之间切换（在同一浏览器上）时，很明显，第一个字母和最后一个字母位于完全相同的位置，具有相同的字体、字重和字体大小。都显式声明并计算为

字体系列：Arial、Helvetica、sans serif

然而，不同字母上的字母间距不同。查看橡胶末端的

e

和

r

之间的空间。我已经在我的inspect元素中使所有的东西都相等了，并且这种变化仍然存在。这只适用于Chrome。在这个问题范围之外的其他浏览器中，行为是不同的

---

我真的不需要匹配它，但我很好奇为什么会存在这种行为。也许是量子物理？

如果你最终无法修复这个bug（比如说它与浏览器相关），并且字母间距必须精确，那么你可以使用一个字距库，比如给你一个字母间距控制，直到单个字母。我在几个项目中使用了它，但并没有注意到任何显著的性能影响（仅将其应用于需要有限控制字体的元素）

哪个浏览器？它在其他浏览器中发生吗？在chrome中。实际上，在其他浏览器中，第一个字母和最后一个字母不匹配，但我预料到了。我希望chrome本身是一致的。你比较过开发者工具中的computed选项卡了吗？那么，是时候问一个显而易见的问题了，因为某种原因，这个问题还没有被问到：两种实现都使用哪些字体？如果可以证明它们是相同的（包括版本号，而不仅仅是字体名称），那么这两者的完整CSS属性链是什么？（请参阅开发工具->计算属性）。他们有什么不同吗？如果是这样的话，首先消除这些差异，看看这种情况是否仍然存在。最后，花点时间制作一个最小的、可重复的示例。复制两个不同的页面，去掉所有无关紧要的内容，将其放到网上（jsbin、链接等），以便潜在的帮助者可以进行调查。这是一个调试问题，希望不要介入其中。方法论的作用是：将代码简化为问题案例，列出所有可能出错的事情的详细列表，重新编写列表，说明如何找出每一件事情，然后逐个进行测试。此外，从调试中收集到的信息应该包含在您的问题中，这样每个人都可以看到结果，而不是隐藏在相当长的注释线程中=）