我想跳上图标字体列车,但很快被渲染器推迟了.

当图标位于具有百分比宽度或自动居中的div内时,图标可以与半像素对齐,从而使其呈现模糊.

我与Icomoon的支持人员联系,后者向我介绍了一个错误,该错误表明它是Chrome特有的. (https://bugs.chromium.org/p/chromium/issues/detail?id=426333)不幸的是我能够在所有主流浏览器中重现这个问题.

我得到的建议是避免汽车保证金,只使用浮动,这在今天的世界中是不可能的.即使我这样做,我仍然会与百分比宽度冲突.

题

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

重现问题的步骤

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

铬

模糊：

脆：

火狐

模糊：

脆：

歌剧

模糊：

脆：

边缘

模糊：

脆：

IE浏览器

模糊：

酥脆：

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

字体和图标字体是矢量

在基本层面上,图标字体是矢量.这样,无论字体大小如何,图标都可以缩放,不会变得模糊.然而,当矢量的边缘不与像素的边缘对齐时,可能发生模糊.

矢量与像素渲染

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

07001

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

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

07002

Correctly aligned vectors

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

浏览器渲染和高DPI屏幕

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

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

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

>将图标设置为显示：内联块而不是默认显示：文本倾向于内联. (不太可能工作,但它可能).
>将图标包装在一个固定宽度的div中,该div大于图标大小,然后可以居中.
>如果使用div方法,请尝试使用左对齐或居中对齐文本的差异.