FontAwesome图标看起来像素化/模糊

Question

我已经多次在stackoverflow或它们的github上看到这个'FontAwesome图标看起来像素化/模糊'的问题，但是没有一个解决方案适合我。 这是一个示例：
https://plnkr.co/edit/CmviS7TuPcIJX20G?preview

前3个列表项使用Font-Awesome创建一个“花式复选框”，而后3个列表项使用规则的边框半径（以及一些变换后的矩形形成该复选框...不是最佳选择）。
在我看来，最下面的3个border-radius列表项比最上面的3个FontAwesome更好（但我们使用的表单框架使用Font-Awesome，因此希望仅使用一些简单的CSS修复程序对其进行修复）。 我检查了最新版本的Chrome / Firefox / Edge / Opera（在Window7上）...
使用Font-Awesome的前3个列表项在所有浏览器（尤其是主要的白色圆圈）上看起来有些参差不齐。随附图片：

我正在使用FontAwesome 4.3，但似乎人们在Font-Awesome 5中也遇到了相同类型的问题（相信我也尝试过FontAwesome 5文件也没有用）。

我尝试过的在其他帖子上看到的内容：

• 将SVG字体文件放在@ font-face css规则中的较高位置 font-awesome.css文件（我在计算机上本地尝试过，但是 没用）。
• 添加类似“ -webkit-font-smoothing”的内容： 抗锯齿；”
• 在复选框项上添加临时变形 就像“ 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;
}

Answer 1

启用Windows ClearType，并重新启动计算机后，FontAwesome图标看上去与边框半径图标一样清晰：

现在在所有4种浏览器上看起来都很棒。
显然“默认情况下，Windows 7、8和10中启用了ClearType”。
所以也许我把它关了。