Css 不均匀像素显示

很抱歉，我甚至不能用表达的方式描述这个问题，我面临着这样一个问题：屏幕上的这些数字不会出现在同一行上，即使它们具有相同的高度、相同的字体大小和相同的行高

逐渐增加字体大小似乎可以解决字体大小为3的倍数时的问题，否则它仍然会有这个恼人的偏移量。似乎问题只在于浏览器尽其最大努力来近似该像素的位置，但有点失败

这个问题只发生在Firefox上，同样的组件在Chrome上似乎工作得很好

---

您可以在此处进一步查看元素

使用另一种字体作为数字

Ant design badge创建0-10之间的所有数字以显示动画。它们是隐藏的，但在徽标上方/下方的dom中可见，但通过溢出隐藏。如果手动调整字体大小，还需要固定行高/数字高度，以便所有不可见的数字正确对齐

---

这是否与

10

字体完全不同？@PraveenKumarPurushothaman没有完全理解您的问题？如果字体只支持3的倍数，那么如果您必须坚持使用字体，您就必须使用3的倍数。@iLuvLogix不幸的是，这是不可能的，即使这样也不够，因为所有其他数字都有相同的问题。@Webber我知道有解决办法，但我们的任务非常严格，没有要求我们不能编辑内容。这就是为什么我更感兴趣的是知道为什么会发生这种情况，而不是只是修补它，不管它是怎么来的。不幸的是，这不是一个选项。我必须坚持使用相同的字体。另外，为什么它一开始就发生了？