自动居中 div 内的图标字体渲染根据浏览器宽度模糊/清晰
Cre*_*ane 5 css fonts icons svg cleartype
我想跳上图标字体火车，但很快就被渲染器推迟了。当图标位于具有百分比宽度或自动居中的 div 内时，该图标可能会对齐到半个像素，从而导致其呈现模糊。
我与 Icomoon 支持人员联系，他向我介绍了一个错误，说它是 Chrome 特定的。( https://bugs.chromium.org/p/chromium/issues/detail?id=426333 ) 不幸的是，我能够在所有主要浏览器中重现该问题。
我得到的建议是避免自动保证金并仅使用浮动左侧，这在当今世界是不可能的。即使我这样做，我仍然会与百分比宽度发生冲突。
题
有什么办法可以防止出现模糊？我想使用 inline-svgs 是一种选择，对吗？但这有点超出了 Icon Font 的全部目的。或者有一个脚本可以将所有内容四舍五入到整个像素，但这听起来也很极端。
重现问题的步骤
我在 Icomoon 上创建了一组 24px 的图标，下载了带有 demo.html 的图标集。然后我只是到演示的主要包装器，并给它一个固定宽度和边距 0 自动。然后通过调整浏览器宽度，我能够使图标模糊或清晰。
铬合金
模糊： 
酥脆： 
火狐
模糊： 
酥脆： 
歌剧
模糊： 
酥脆： 
边缘
模糊： 
酥脆： 
IE浏览器
模糊： 
酥脆： 