为啥 fa-rotate-90 图标在 Chrome 中显得模糊？

Posted 2023-03-05

【中文标题】为啥 fa-rotate-90 图标在 Chrome 中显得模糊？

【英文标题】：Why does fa-rotate-90 icons appear blurry in Chrome?为什么 fa-rotate-90 图标在 Chrome 中显得模糊？

【发布时间】：2014-02-20 01:27:00

【问题描述】：

这张图片是来自 Font Awesome examples的截图

在我的屏幕上（我什至在 Paint 中旋转以确保它真的很模糊，而不仅仅是一些魔法），90 度和 270 度的旋转看起来很模糊。垂直和水平翻转都很好。我的问题是为什么？ Chrome 或 Font Awesome 机制导致这种情况发生的原因是什么？

当然，IE 9 中的情况要差很多

【问题讨论】：

清除类型？为 LCD 进行的抗锯齿通常是水平进行的，将水平锯齿旋转到垂直方向看起来像废话。

在我的 chrome 中，它们看起来并没有那么糟糕，但它们肯定不像平常那​​么清晰。

【参考方案1】：

font-awesome CSS 定义了导致此问题的 CSS 规则。

.fa 
    line-height: 1;

去掉这条规则后，图标显示效果很好。

【讨论】：

Chuck norris 可以帮助 IE ;)