如果有人可以提供证据证明这是理想的浏览器实现中实际发生的事情,但这个答案是基于您在问题中提到的偶数/奇数像素值,并且我认为这是最可能的原因.
字体和图标字体是矢量
在基本层面上,图标字体是矢量.这样,无论字体大小如何,图标都可以缩放,不会变得模糊.然而,当矢量的边缘不与像素的边缘对齐时,可能发生模糊.
矢量与像素渲染
要从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方法,请尝试使用左对齐或居中对齐文本的差异.