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

Question

这个“只是另一个模糊的图标问题”开始让我非常头疼，这就是我决定在这里寻求帮助的原因。相信我，我已经阅读了网络上所有“模糊图标”的文章。

下图显示了当您调整浏览器宽度、在奇数和偶数之间切换时 github.com 上的字体图标发生的情况。

但问题来自其他地方，它来自某个父元素 (.container)，该元素使用 ma​​rgin-left/right 属性设置为“auto”居中。

所有图标都正确对齐网格，它们都具有 font-smoothing: antialized，并且 SVG 字体已经移动到 .ttf 字体的前面。所以不，这不是这些问题之一。它与使用 ma​​rgin auto 对齐父容器中心时浏览器如何呈现字体图标密切相关。

任何想法如何在不更改自居中父容器的边距属性的情况下解决此问题？

Answer 1

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

不幸的是，我不知道除了逐个调整图标的水平位置之外的解决方法，例如通过应用将图标位置调整回像素网格的子像素边距（例如，margin-left：0.25px）。