使用图标字体（Font Awesome）看起来有点模糊，太粗 [英] Using an icon font (Font Awesome) looks a little blurred and too bold

问题描述

我使用Font Awesome在我的网站上创建图标，虽然他们看起来梦幻般的iPod Touch与Retina显示，在我的iMac他们看起来有点模糊，定义较少。

以下是要演示的图片：

如你所见，Retina显示器iPod Touch上的字体看起来非常漂亮和清脆，但在iMac上， 。

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

解决方案

这样的问题可能与反锯齿或提示有关。字体需要在某种网格上对齐，如果他们希望看起来更好的小尺寸。 GitHub人写了一个伟大的博客文章，介绍他们如何管理自定义字体的清洁度。 p>

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

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

如果可能，请使用您的DPI设置。我不使用Mac，所以我不知道如何更改这些设置。它仍然不会解决基础网格问题，但。您能够编辑相关字体吗？

I'm using Font Awesome to create icons on my site, and while they look fantastic on the iPod Touch with Retina display, on my iMac they looks a bit blurred and less defined.

Here's an image to demonstrate:

As you can see, the font looks really nice and crispt on the Retina Display iPod Touch, but on the iMac, it's kind of crappy.

What is causing this? Is this to do with anti aliasing? Is there something I can do about this?

解决方案

Problems like this are likely related to anti-aliasing or hinting. Fonts need to be aligned on a grid of some sort if they hope to look good at smaller sizes. The GitHub guys wrote a great blog post on how they managed cleanliness in their custom font.

I would try to align it on a grid and follow in the GitHub people's footsteps. They did a good job on their icons.

Also: are the icons different numeric sizes between the iPod Touch and the iMac, or is that a side effect of different DPI settings? That may also be a concern with font rendering.

If possible, play around with your DPI settings. I don't use Macs, so I don't know how to change those settings on one. It still won't fix the underlying grid issue, though. Are you able to edit the font(s) in question?

这篇关于使用图标字体（Font Awesome）看起来有点模糊，太粗的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！