css - 自动居中的 div 内的图标字体呈现模糊/清晰基于浏览器宽度

Question

我想跳上图标字体火车，但很快就被渲染器推迟了。当图标位于具有百分比宽度或自动居中的 div 内时，图标可能会对齐到半个像素，导致它呈现模糊。

我联系了 Icomoon 支持人员，他们向我介绍了一个 bug，该 bug 是 Chrome 特有的。 ( https://bugs.chromium.org/p/chromium/issues/detail?id=426333 ) 不幸的是，我能够在所有主要浏览器中重现该问题。

我得到的建议是避免 auto margin 并只使用 float left，这在当今世界是不可能的。即使我这样做，我仍然会与百分比宽度发生冲突。

问题

有什么方法可以防止模糊发生吗？我想使用 inline-svgs 是一种选择吧？但这有点违背了图标字体的全部目的。或者有一个脚本可以将所有内容四舍五入到整数像素，但这听起来也很极端。

重现问题的步骤

我在Icomoon上制作了一套24px的图标，下载了一套，里面有一个demo.html。然后我只是给演示的主要包装器，并给它一个固定的宽度和边距 0 auto。然后通过调整浏览器宽度，我可以使图标模糊或清晰。

Chrome

模糊:

酥脆:

火狐

模糊:

酥脆:

歌剧

模糊:

酥脆:

边缘

模糊:

酥脆:

Internet Explorer

模糊:

酥脆:

Answer 1

如果有人可以提供证据证明这是理想的浏览器实现中实际发生的事情，但这个答案是基于你在问题中提到的偶数/奇数像素值，我认为这是最可能的原因。

字体和图标字体都是矢量

在基本层面上，图标字体是矢量。这允许图标缩放而不考虑字体大小并且不会变得模糊。然而，当矢量的边缘与像素的边缘不对齐时，就会出现模糊。

矢量与像素渲染

从Font Awesome Icon Design Tips Guide窃取，你可以看到下面的两个演示。顶部图像是一个矢量，带有一堆 1px 宽线，间隔 1px，但它们偏移了 0.5px。当在没有放大的情况下呈现为像素时，这会导致它们变得模糊，因为像素必须采用 50% 的线条颜色和 50% 的背景颜色。

Vector edges that don't line up with the pixel edges. (The blue representing the 0.5px offset from the pixel edge).

另一方面，下图的矢量排成一行，因此线条/条形的任一边缘都与像素的边缘对齐。因此，在像素级渲染时，没有像素必须合并背景和线条颜色。

Correctly aligned vectors

要查看更多示例来更详细地解释这一点，我建议阅读完整指南，其中也解释了清晰的对 Angular 线边缘。

浏览器渲染和高 DPI 屏幕

浏览器现在必须处理高 DPI/视网膜屏幕，这使得“居中”文本变得非常容易，因为每个 CSS px 宽度有 2 个实际像素；因此，您可以每隔 0.5px 绘制清晰的线条。

根据您的图像判断，您使用的是常规 DPI 屏幕来查看字体，因此当浏览器被迫以 0.5px 值呈现图标时，矢量的边缘位于像素的中间，而不是中间，这意味着该像素必须占据背景颜色的 50% 和图标颜色的 50%，从而导致边缘模糊。

至于解决方案，遗憾的是我手头没有较低分辨率的显示器来测试。您的目标是使图标的边缘呈现在像素边界的边缘，这需要一些操作，但您可以尝试以下操作:

• 将您的图标设置为 display: inline-block 而不是文本通常具有的默认 display: inline。 (不太可能奏效，但可能奏效)。
• 将您的图标包裹在固定宽度的 div 中，刚好大于可以居中的图标大小。
• 如果使用 div 方法，请尝试文本左对齐或居中对齐的区别。