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

【问题标题】：FontAwesome icons looks pixelated/blurredFontAwesome 图标看起来像素化/模糊
【发布时间】：2020-10-09 03:48:34
【问题描述】：

我在 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-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;
}

【问题讨论】：

idk 如果是你的情况，但一个月前我遇到了同样的问题，因为我两次使用 2 个不同的版本导入了很棒的字体库
@Berto99 不要认为那是问题...我的 plunker 示例只是导入一次 FontAwesome css 文件。
是的，但是可以完美地看到你的例子，没有混叠发生，检查这张图片ibb.co/cF5pf7n
有趣...不知道为什么它只会影响我的两台笔记本电脑而不是你的笔记本电脑。您正在查看哪个版本的 Chrome？我在 Windows7 上使用版本 83.0.4103.61（官方构建）（64 位）。
无论缩放级别如何，在我这边看起来都很流畅（Mac 上的 Chrome 83）。

标签： css font-awesome font-awesome-5 font-awesome-4

【解决方案1】：

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

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

【讨论】：