Firefox图标字体过度粗体抗锯齿

Question

Firefox图标字体过度粗体抗锯齿

Ale*_*ahn 6 html css firefox antialiasing

我知道不同的浏览器以不同的方式呈现文本 - 在某种程度上,我很酷.然而,在尝试为一个项目使用图标字体时,Firefox,特别令我恼火.

基本上我有一排社交媒体图标,通过@ font-face和一些伪类显示.除了Firefox有一点问题,很好地渲染它们......

这是他们看起来像Chrome和Firefox的样子.

Chrome 23.0.1271.101(Mac)

http://cl.ly/image/0M3t2S3N2A38/

(完善)

Firefox 17.0.1(Mac)

http://cl.ly/image/053d2J0J312K

(不那么完美的)

您可能会看到我遇到的问题......

我还检查了其他几个浏览器,看它是不是只是firefox.它只是火狐.即便是IE也能做得更好.

代码:

CSS

@font-face {
    font-family: 'icomoon';
    src:url('fonts/icomoon.eot');
    src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
    url('fonts/icomoon.svg#icomoon') format('svg'),
    url('fonts/icomoon.woff') format('woff'),
    url('fonts/icomoon.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


[class^="icon-"]:before, 
[class*=" icon-"]:before {
    font-family: 'icomoon';
    font-style: normal;
    speak: none;
    font-weight: normal;
    line-height: 1;
    text-align: center;
}


.icon-flkr:before {
    content: "\2b";
}
.icon-fbk:before {
    content: "\2c";
}
.icon-twitter:before {
    content: "\3e";
}
.icon-lfm:before {
    content: "\24";
}
.icon-lkdin:before {
    content: "\25";
}
.icon-inst:before {
    content: "\26";
}

Run Code Online (Sandbox Code Playgroud)

HTML

<ul id="footer_social_list" class="group">
    <li><a href="#" class="icon-twitter" title="Follow me on Twitter"></a></li>
    <li><a href="#" class="icon-fbk"></a></li>
    <li><a href="#" class="icon-lkdin"></a></li>
    <li><a href="#" class="icon-flkr"></a></li>
    <li><a href="#" class="icon-inst"></a></li>
    <li><a href="#" class="icon-lfm"></a></li>
</ul>

Run Code Online (Sandbox Code Playgroud)

我尝试了很多东西来解决这个问题.从用CSS改变不透明度; 尝试文字阴影; 改变@ font-face,类和继承样式的权重; 使用"data-icon"; 甚至确保每个图标与像素网格对齐.

在Firefox中没有任何改进产生任何改进,我会说IE9中的Instagram图标略有例外,在每个浏览器中一切都很好看.

那么为什么Firefox会这样做呢？我有什么办法可以让它表现出来吗？

PS:我还没有添加-webkit-font-smoothing:antialiased; 并不是说无论如何都会影响到Firefox.