小编Ale*_*ahn的帖子

我知道不同的浏览器以不同的方式呈现文本 - 在某种程度上,我很酷.然而,在尝试为一个项目使用图标字体时,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 { …