CSS 使用图标字体 (Font Awesome) 看起来有点模糊且过于粗体
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12642991/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using an icon font (Font Awesome) looks a little blurred and too bold
提问by shrewdbeans
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.
我正在使用 Font Awesome 在我的网站上创建图标，虽然它们在带有 Retina 显示屏的 iPod Touch 上看起来很棒，但在我的 iMac 上它们看起来有点模糊和不太明确。
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.
如您所见，该字体在 Retina Display iPod Touch 上看起来非常漂亮和清晰，但在 iMac 上，它有点蹩脚。
What is causing this? Is this to do with anti aliasing? Is there something I can do about this?
这是什么原因造成的？这与抗锯齿有关吗？我能做些什么吗？
采纳答案by shrewdbeans
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 poston how they managed cleanliness in their custom font.
像这样的问题可能与抗锯齿或提示有关。如果字体希望在较小的尺寸下看起来不错，则需要在某种网格上对齐。GitHub 上的人写了一篇很棒的博客文章，介绍了他们如何管理自定义字体的清洁度。
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.
我会尝试在网格上对齐它并跟随 GitHub 人的脚步。他们在他们的图标上做得很好。
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.
另外：iPod Touch 和 iMac 之间的图标数字大小是否不同，还是不同 DPI 设置的副作用？这也可能是字体渲染的一个问题。
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?
如果可能，请使用您的 DPI 设置。我不使用 Mac，所以我不知道如何更改其中的设置。不过，它仍然无法解决潜在的网格问题。你能编辑有问题的字体吗？
回答by Alexander Chen
Adding to @sporkbox's answer, if you are particularly concerned about Webkit browsers, there are the following CSS options you can choose to use:
添加到@sporkbox 的回答中，如果您特别关注 Webkit 浏览器，您可以选择使用以下 CSS 选项：
font-smooth: auto | never | always | <absolute-size> | length | initial | inherit
-webkit-font-smoothing : none | subpixel-antialiased | antialiased
回答by gterez
I've found that some browsers try to emulate a bold font face when there's no bold weight available by making the lines thicker, resulting in something like the situation you're describing. Are you sure this appears somewhere where you have font-weight: normal;?
我发现有些浏览器会在没有粗体时通过使线条更粗来模拟粗体字体，从而导致类似于您所描述的情况。你确定这出现在你有的地方font-weight: normal;吗？
回答by Paulo Rodrigues
there's a strange trick that works sometime, try:
有一个奇怪的技巧有时会起作用，请尝试：
-webkit-transform:rotateZ(0);
-moz-transform:rotateZ(0);
-o-transform:rotateZ(0);
transform:rotateZ(0);
if you have a block centered, try to check if left offset is an integer. You can use Javascript to check and fix it. I can help you if you want.
如果您有一个居中的块，请尝试检查左偏移量是否为整数。您可以使用 Javascript 来检查和修复它。如果你愿意，我可以帮你。
回答by Marco Allori
Best cross-browser solution is:
最好的跨浏览器解决方案是：
.your_font_class{
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
回答by phoenix
Some of the solutions mentioned before kinda/sorta did the trick but what fixed it for me was removing (commenting out) the font size inheritance of the "fa" class inside font-awesome.css (and font-awesome.min.css):
在 kinda/sorta 之前提到的一些解决方案做到了这一点，但对我来说修复它的是删除（注释掉）font-awesome.css（和 font-awesome.min.css）中“fa”类的字体大小继承：
font-size: inherit;
The final result of the class looks like this:
该类的最终结果如下所示：
.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;
}
In addition to this, I had to adjust the large icons because they were getting pushed down too far by commenting out this line from the "fa-lg" class:
除此之外，我不得不调整大图标，因为通过从“fa-lg”类中注释掉这一行，它们被推得太远了：
vertical-align:-15%
The class looks like this
这门课看起来像这样
.fa-lg {
font-size: 1.33333333em;
line-height: 0.75em;
/* vertical-align: -15%; */
}
I'm using Font Awesome 4.7.0
我正在使用 Font Awesome 4.7.0
回答by Ben Taliadoros
-webkit-perspective: 1000;
-webkit-透视：1000；
Fixed it for me
为我修好了
回答by Kinglybird
Use css font smoothing:
使用 css 字体平滑：
-webkit-font-smoothing: antialiased;
