父容器具有自动边距时的模糊字体图标

Question

这只是另一个模糊的图标问题＆＃34;开始给我带来严重的麻烦，这就是为什么我决定在这里寻求帮助的原因。相信我，我已经阅读了所有模糊的图标＆＃39;网上的文章。

下图显示了当你调整浏览器宽度，在奇数和偶数值之间切换时，github.com上的字体图标会发生什么。

但问题来自其他地方，它来自一些父元素（.container），它使用 margin-left / right属性设置为＆＃39; auto＆＃39; 来居中。< / p>

所有图标都是正确的网格对齐，它们都有字体平滑：防褪色，SVG字体已经移动到.ttf前面。所以不，这不是其中一个问题。当您使用 margin auto 对齐父容器中心时，它与浏览器如何呈现字体图标严格相关。

如何解决这个问题而不改变自定心父容器的margin属性？

Answer 1

我自己也遇到同样的问题。至少在我的情况下，它似乎是由图标字形的水平位置引起的，该水平位置以子像素值结束（例如，在99.5px而不是100px）。这可能是由许多不同情况引起的，例如水平居中（如您的情况）。

不幸的是，除了根据具体情况调整图标的水平位置之外，我还没有意识到解决方法，例如：通过应用子像素边距将图标的位置调整回像素网格（例如，边距左侧：0.25px）。