解决FontAwesome文本呈现差异

Question

请参阅上图。我在我的网站上使用图标字体'FontAwesome'。在网站标题中，我将它们用于导航图标。这些图标中的每一个都是链接，附加了'fa'和'fa-2x'类。

我没有推翻FontAwesome的任何默认字体大小或渲染模式，所以这是一个干净的状态。所有屏幕截图均来自Windows 8.1，测试多个浏览器。以下是我的发现：

• Firefox：完美呈现，易读性和抗锯齿之间的最佳平衡
• Chrome：字体渲染过于粗糙和粗糙，损害了易读性
• Safari：合理的易读性，但有点太薄和刺耳
• IE10：非常接近FF，可以接受
• Opera：与Safari相同

根据Firefox示例，Mu的最终目标是在浏览器之间进行理想的渲染。一个或许更现实的目标是击败Chrome提交，因为它提出了最大的问题。

默认情况下，Font-Awesome已应用：

-webkit-font-smoothing: antialiased;

我已经尝试将其设置为其他文本渲染模式，但似乎没有一个有意义的区别，设置text-stroke属性也是如此，即使在0处''厚度'问题仍然存在。从“成员”图标中可以看出这个问题。

您可以在www.jungledragon.com

看到渲染

有关如何提高渲染质量和一致性的任何线索/提示？

Answer 1

我可以看到这个旧问题，但我遇到类似FontAwesome的问题，并发现这些图标的重量可能会有所不同，具体取决于The column id must be mapped to a field in class AppBundle\Entity\Exceptions since it is referenced by a join column of another class. 属性（毕竟这是一个字体）

所以，我的问题是图标中的小洞在我的应用程序中变得不可见，解决方案是在CSS中将font-weight属性设置为font-weight。

根据我的喜好，您的问题的Chrome版本中的图标只是超重＆＃34;那样。