我正在使用 Font Awesome 在我的网站上创建图标，虽然它们在配备 Retina 显示屏的 iPod Touch 上看起来很棒，但在我的 iMac 上它们看起来有点模糊且不太明确。
这里有一张图片来演示：
如您所见，Retina Display iPod Touch 上的字体看起来非常漂亮和清晰，但在 iMac 上，它有点糟糕。
这是什么原因造成的？这与抗锯齿有关吗？对此我能做些什么吗？
【问题讨论】：
标签： css fonts font-awesome
此类问题可能与抗锯齿或提示有关。如果字体希望在较小的尺寸下看起来不错，则需要在某种网格上对齐。 GitHub 的人写了一篇很棒的 blog post，介绍了他们如何管理自定义字体的清洁度。
我会尝试在网格上对齐它并跟随 GitHub 人的脚步。他们的图标做得很好。
另外：iPod Touch 和 iMac 之间的图标数字大小是否不同，或者这是不同 DPI 设置的副作用？这也可能是字体渲染的一个问题。
如果可能，请尝试使用您的 DPI 设置。我不使用 Mac，所以我不知道如何在其中更改这些设置。不过，它仍然无法解决底层网格问题。您可以编辑相关字体吗？
【讨论】：
补充@sporkbox的回答，如果你特别关心Webkit浏览器，有以下CSS选项可以选择使用：
font-smooth: auto | never | always | <absolute-size> | length | initial | inherit
-webkit-font-smoothing : none | subpixel-antialiased | antialiased
【讨论】：
我发现某些浏览器会在没有可用粗体时通过使线条变粗来尝试模拟粗体字体，从而导致类似于您所描述的情况。你确定这出现在你有font-weight: normal; 的地方吗？
【讨论】：
最好的跨浏览器解决方案是：
.your_font_class{
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
【讨论】：
有一个奇怪的技巧有时会奏效，试试吧：
-webkit-transform:rotateZ(0);
-moz-transform:rotateZ(0);
-o-transform:rotateZ(0);
transform:rotateZ(0);
如果你有一个块居中，尝试检查左偏移量是否为整数。您可以使用 Javascript 来检查和修复它。如果你愿意，我可以帮你。
【讨论】：
-webkit-perspective: 1000;
帮我修好了
【讨论】：
在 kinda/sorta 之前提到的一些解决方案起到了作用，但为我解决的问题是删除（注释掉）font-awesome.css（和 font-awesome.min）中“fa”类的字体大小继承.css):
font-size: inherit;
类的最终结果是这样的：
.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
/* font-size: inherit; */
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
除此之外，我不得不调整大图标，因为通过注释掉“fa-lg”类中的这一行，它们被推得太远了：
vertical-align:-15%
类是这样的
.fa-lg {
font-size: 1.33333333em;
line-height: 0.75em;
/* vertical-align: -15%; */
}
我正在使用 Font Awesome 4.7.0
【讨论】：
使用css字体平滑：
-webkit-font-smoothing: antialiased;
【讨论】：