使用图标字体（Font Awesome）看起来有点模糊和过于大胆

Question

我正在使用Font Awesome在我的网站上创建图标，虽然它们在带有Retina显示屏的iPod Touch上看起来很棒，但在我的iMac上，它们看起来有点模糊，而且定义较少。

这是一张展示的图片：

正如您所看到的，Retina Display iPod Touch上的字体看起来非常漂亮和脆弱，但在iMac上，它有点蹩脚。

造成这种情况的原因是什么？这与抗锯齿有关吗？我能做点什么吗？

Answer 1

这样的问题可能与抗锯齿或暗示有关。如果字体希望在较小的尺寸上看起来很好，则需要在某种网格上对齐字体。 GitHub的人写了一篇很棒的blog post关于他们如何用自定义字体管理清洁度的方法。

我会尝试在网格上对齐它，并遵循GitHub人的脚步。他们在他们的偶像上做得很好。

另外：iPod Touch和iMac之间的图标是不同的数字大小，还是不同DPI设置的副作用？这也可能是字体渲染的一个问题。

如果可能，请使用DPI设置。我不使用Mac，所以我不知道如何更改这些设置。但它仍然无法修复底层网格问题。你能编辑有问题的字体吗？

Answer 2

添加@sporkbox的答案，如果您特别关注Webkit浏览器，可以选择使用以下CSS选项：

font-smooth: auto | never | always | <absolute-size> | length | initial | inherit
-webkit-font-smoothing : none | subpixel-antialiased | antialiased

Answer 3

我发现有些浏览器尝试通过使线条变粗来没有大胆的重量来模拟粗体字体，导致类似于您描述的情况。你确定这出现在font-weight: normal;的某个地方吗？

Answer 4

有一个奇怪的技巧，有时可以使用，试试：

-webkit-transform:rotateZ(0);
-moz-transform:rotateZ(0);
-o-transform:rotateZ(0);
transform:rotateZ(0);

如果您有一个居中的块，请尝试检查左侧偏移是否为整数。您可以使用Javascript来检查和修复它。如果你愿意，我可以帮助你。

Answer 5

最佳跨浏览器解决方案是：

.your_font_class{
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

Answer 6

-webkit-perspective：1000;

为我修好了

Answer 7

使用css字体平滑：

-webkit-font-smoothing: antialiased;