我在 stackoverflow 或他们的 github 上多次看到这个“FontAwesome 图标看起来像素化/模糊”问题，但没有一个解决方案适合我。这是一个示例：
https ://plnkr.co/edit/CmviS7TuPcIJX20G?preview
前 3 个列表项使用 Font-Awesome 创建一个“精美的复选框”，而底部 3 个列表项使用常规边框半径（以及一些转换后的矩形来形成复选框......不是最佳的）。
在我看来，底部的 3 个边框半径列表项比顶部的 3 个 FontAwesome 更好（但我们使用的表单框架使用 Font-Awesome，因此希望通过一些简单的 CSS 修复来修复它）。我检查了 Chrome/Firefox/Edge/Opera 的最新版本（在 Window7 上）...
使用 Font-Awesome 的前 3 个列表项在所有浏览器上看起来都有点参差不齐（尤其是主要的白色圆圈）。附上一张图片：
我正在使用 FontAwesome 4.3，但似乎人们在 Font-Awesome 5 中也遇到了相同类型的问题（相信我也尝试过 FontAwesome 5 文件但无济于事）。
我尝试过在其他帖子上看到的东西：
- 将 SVG 字体文件放在 font-awesome.css 文件的 @font-face css 规则中更高的位置（我在我的计算机上本地尝试过，但没有奏效）。
- 添加类似“-webkit-font-smoothing: antialiased;”
- 在复选框项目上添加临时转换，如“transform:rotateZ(0.5);”
- 使用 12px 或 14px 或 16px 倍数的字体大小（取决于使用的 Font-Awesome 版本）。对于这个例子，我使用了 14px，因为这似乎是 .fa 的基本字体大小。
接受建议尝试，谢谢！
如果我要链接到 plunkr，则必须发布一些代码，所以这里是 Font-Awesome 项目的主要 CSS：
.has-font-awesome li:before {
font-family: FontAwesome;
font-size: 48px;
content: '\f111';
color: white;
position: absolute;
top: 0px;
left: 0px;
}
.has-font-awesome li:after {
font-family: FontAwesome;
font-size: 36px;
content: '\f00c';
color: black;
position: absolute;
top: 7px;
left: 3px;
}
