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

Question

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

这是一张展示的图片:

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

是什么造成的？这与抗锯齿有关吗？我可以做些什么吗？

Answer 1

像这样的问题可能与抗锯齿或暗示有关.如果字体希望在较小的尺寸上看起来很好,则需要在某种网格上对齐字体.GitHub的人写了一篇很棒的博客文章,介绍了他们如何使用自定义字体管理清洁度.

我会尝试在网格上对齐它,并遵循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;吗？