FontAwesome 图标看起来 pixelated/blurred

Question

我在 Whosebug 或他们的 github 上多次看到这个 'FontAwesome icons looks pixelated/blurred' 问题，但 none 的解决方案对我有用。这是一个例子：
https://plnkr.co/edit/CmviS7TuPcIJX20G?preview

前 3 个列表项使用 Font-Awesome 创建 'fancy checkbox'，而后 3 个列表项使用常规的 border-radius（和一些变形的矩形来形成复选框...不是最佳的）。
底部的 3 个 border-radius 列表项在我看来比顶部的 3 个 FontAwesome 好得多（但是我们使用的表单框架使用 Font-Awesome 所以希望通过一些简单的 CSS 修复来修复它）。我检查了最新版本的 Chrome/Firefox/Edge/Opera（在 Window7 上）...
使用 Font-Awesome 的前 3 个列表项在所有浏览器上看起来都有些参差不齐（尤其是主要的白色圆圈）。附上图片：

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

我在其他 post 上看到的尝试：

将 SVG 字体文件放在 @font-face css 规则的更高位置 font-awesome.css 文件（我在我的电脑上本地试过，但是没用）。
添加类似“-webkit-font-smoothing：抗锯齿；”
在复选框项目上添加临时变换喜欢 "transform:rotateZ(0.5);"
使用 12px 或 14px 或 16px 的倍数的字体大小（取决于使用的 Font-Awesome 版本）。对于这个例子，我使用了 14px，因为这似乎是 .fa.

欢迎尝试的建议，谢谢！

如果我要链接到 plunkr，则必须 post 一些代码，所以这里是 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 图标看起来 crystal 清晰如 border-radius 图标：

现在在所有 4 种浏览器上看起来都很棒。
显然 "ClearType is enabled by default in Windows 7, 8, and 10".
所以也许我把它关掉了。

FontAwesome 图标看起来 pixelated/blurred

FontAwesome icons looks pixelated/blurred

css

font-awesome

font-awesome-4

font-awesome-5