基于浏览器宽度

Question

我想跳上图标字体列车，但很快被渲染器推迟了。 当图标位于具有百分比宽度或自动居中的div内时，图标可以与半像素对齐，从而使其呈现模糊。

我与Icomoon支持人员有过接触，他向我提出了一个错误消息，称该消息是Chrome专用的。 （https://bugs.chromium.org/p/chromium/issues/detail?id=426333）不幸的是，我能够在所有主流浏览器中重现这个问题。

我得到的建议是避免自动保证金，只使用左手浮动，这在今天的世界中是不可能的。即使我这样做，我仍然会与百分比宽度发生冲突。

问题

有没有办法防止模糊发生？我想使用inline-svgs会是一个选项吗？但这有点超过了Icon Font的全部目的。或者有一个脚本可以将所有内容四舍五入到整个像素，但这听起来也很极端。

重现问题的步骤

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

铬

模糊：

Crisp：

火狐

模糊：

Crisp：

戏

模糊：

Crisp：

边

模糊：

Crisp：

Internet Explorer

模糊：

Crisp：

Answer 1

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

字体和图标字体是向量

在基本级别上，图标字体是矢量。这样，无论字体大小如何，图标都可以缩放，不会变得模糊。但是，当矢量的边缘与像素的边缘不对齐时，可能会出现模糊。

矢量与像素渲染

要从Font Awesome Icon Design Tips Guide窃取，您可以在下面看到两个演示。顶部图像是一个带有1px条宽线的矢量，间隔1px，但它们被0.5px偏移。当渲染为像素而不进行放大时，这会导致它们变得模糊，因为像素必须占据线条颜色的50％和背景颜色的50％。

  

     

不与像素边缘对齐的矢量边。 （蓝色表示距像素边缘0.5px的偏移量。）

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

  

     

正确对齐的载体

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

浏览器渲染和高DPI屏幕

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

根据您的图像判断，您使用常规DPI屏幕查看字体，因此当浏览器强制以0.5px值渲染图标时，矢量边缘位于中间一个像素，而不是一半，意味着像素必须占据背景颜色的50％，以及50％的图标颜色，导致模糊的边缘。

至于解决方案，我遗憾地没有一个较低的res监视器来测试。你的目标是使图像的边缘渲染在像素边界的边缘，这将需要一些摆弄，但这里有一些你可以尝试的东西：

• 将图标设置为display: inline-block，而不是文字所具有的默认display: inline。 （不太可能工作，但可能）。
• 以固定宽度div包裹您的图标，该图标大小可以居中的图标大小。
• 如果使用div方法，请尝试使用左对齐或居中对齐文本的区别。

Answer 2

根据我的经验，模糊字体通常是图标创建方式的结果。 Font Awesome在设计清晰的图标字体方面有一些good tips。